Canvas removeEventListener doesn't work for tick

[александрб62780587]

this.addEventListener('tick', load.bind(this));

var i = 0;

function load(){

  this.removeEventListener('tick', load); // doesn't wok

  console.log(i++); // always here

}

also tried to do

this.removeEventListener('tick', load.bind(this));

[kglad]

use:

var tl=this;

tl.addEventListener('tick', load.bind(this));

var i = 0;

function load(){

tl.removeEventListener('tick', load); // doesn't wok

console.log(i++); // always here

}

[ClayUUID · Accepted solution]

A more correct thread title would be "Canvas removeEventListener doesn't work for bind".

Your problem is that removeEventListener() requires the same function reference as passed to addEventListener() to succeed in removing the listener. But bind() returns a different function reference every time it's used. That's why your code doesn't work. Of course, the reason bind() is needed at all is because by default event handlers execute in the browser window (global) context instead of the context of the object that triggered it.

There are two ways to work around this:

First way, store a global reference to your "this" so the function can access it.

loadThis = this; // global
this.addEventListener("tick", load);
var i = 100;
function load() {
    loadThis.removeEventListener("tick", load);
    console.log(this);
    console.log(i);
}

Second way, store a reference to the bound event handler function so it can be removed.

var loadHandler = load.bind(this); // bound event handler
this.addEventListener("tick", loadHandler);
var i = 100;
function load() {
    this.removeEventListener("tick", loadHandler);
    console.log(this);
    console.log(i);
}

At this point you should be wondering how both versions are able to access the value of i even though they execute in different contexts. That's because, while the first example executes in window context, the function still has access to local scope. Context is the current value of "this", while scope is how JavaScript resolves variables. JavaScript uses lexical (aka "static") scoping, so a function always has access to its parent, etc. variables no matter what context it's executing in.

This article does a far more thorough job explaining all this:

Understanding Scope and Context in JavaScript | Ryan Morr

[ClayUUID]

Also, if you only want an event handler to execute once, there are a couple of easier ways to do it.

Using the on method to assign your event listener allows passing a flag that specifies it only fires once:

this.on("tick", load, this, true);
var i = 100;
function load() {
    console.log(this);
    console.log(i);
}

Or you can use the event object remove() method in the handler:

this.addEventListener("tick", load);
var i = 100;
function load(evt) {
    evt.remove();
    console.log(this);
    console.log(i);
}

[ap1023]

this post is too old and not sure if i am getting any answers on my questions. but any help will appreciate.

I am new in Adobe animate CC  and using canvas Html5.
want to remove my first event which called earlier and want to call another event. Below is my code.

this.button1.addEventListener("click", fl_popup_down.bind(this))

function fl_popup_down() {
this.popup_window.gotoAndPlay(2);
this.popup_window.button2.addEventListener("click", fl_popup_up.bind(this));
this.button1.removeEventListener("click", fl_popup_down.bind(this)) //not working
alert ('clicked1');

}

function fl_popup_up() {
this.popup_window.gotoAndPlay(11);
alert ('clicked2');
}

[ClayUUID]

So you're doing exactly the thing that I explained in this thread why doing that thing doesn't work, instead of the multiple things I posted that do work.

[ap1023]

As I said, I am totally new in Adobe Animate CC and in Html coding. 🙂 I saw your thread but I don't know where to change and how to use. so I copied all the code and paste as it is into my action script. 😞

But, thanks to your reply, Because of your reply I lead myself to look into my code and find where i need to use. below i have fix the problem using your method. Thanks to you.

this.button1.addEventListener("click", fl_popup_down.bind(this))

function fl_popup_down(evt) {
evt.remove(); // Remove listener
this.popup_window.gotoAndPlay(2);
this.popup_window.button2.addEventListener("click", fl_popup_up.bind(this));

}

function fl_popup_up() {
this.popup_window.gotoAndPlay(11);
this.button1.addEventListener("click", fl_popup_down.bind(this)) // Loop
}