problems with tick

Howe's Avatar

Howe

19 Aug, 2013 02:16 AM

I tried to get a class of mine to tick, and I tried many ways, some have errors, some have incorrect behavior.

The following are the four ways that I tried to call tick:

  1.      `createjs.Ticker.addEventListener("tick", this.tick);        `
    

    The error is: //Uncaught TypeError: Cannot read property 'someProperty' of undefined. Please see the tick function at the bottom code for reference

  2.   ` createjs.Ticker.addEventListener("tick", tick);`
    

    with this, nothing happens, and tick() is not called

  3.     `createjs.Ticker.addEventListener("tick", this);`
    

    The error is: //Uncaught TypeError: object is not a function

  4.        `var that = this;  
    createjs.Ticker.addEventListener("tick", function() { that.tick(); });`
    

    This method yields incorrect behavior. When I create instances of the class, the tick always happens on a later created object, rather than the actual object. So, for example, I created objectA, then objectB, and then objectC, behavior that is supposed to happen to objectA happens to objectB instead, and behavior that is supposed to happen to objectB happens to objectC instead.

The class is something like:

this.myScope= this.myScope || {};
(function () {
var p = MyClass.prototype;
myScope.MyClass = MyClass;

p.initialize = function () {
     //do something
     var that = this;
        createjs.Ticker.addEventListener("tick", function() { that.tick(); });
}   

p.tick = function (event) {
                   // function tick(event) {    //this doesn't work either
        this.someProperty++; //do something with this.someProperty, but with createjs.Ticker.addEventListener("tick", this.tick);        "this" keyword is not accessible in tick. 
}

}());

Can you please tell me why each of the methods field the error that it does, and how to get the correct behavior based on method 4?

  1. 2 Posted by Howe on 19 Aug, 2013 02:18 AM

    Howe's Avatar

    oh, one small mistake, in the code
    this line:
    myScope.MyClass = MyClass;
    is supposed to be the last line in the class.

  2. 3 Posted by ben on 20 Aug, 2013 08:13 AM

    ben's Avatar

    I just do
    createjs.Ticker.addListener(this);
    Your p.tick() function should work fine if you do that.

  3. 4 Posted by Howe on 20 Aug, 2013 01:24 PM

    Howe's Avatar

    createjs.Ticker.addListener is deprecated in the API: "Deprecated: In favour of the "tick" event. Will be removed in a future version. User "addEventListener" instead."

    Also, for some unknown reason, createjs.Ticker.addListener(this); does not work, tick is not even called. If I change it to createjs.Ticker.addEventListener("tick", this); as mentioned in method 3 of my above post, I get the error message: Uncaught TypeError: object is not a function.

    Thank you for the answer, but still not solved...

  4. Support Staff 5 Posted by Lanny McNie on 20 Sep, 2013 07:49 PM

    Lanny McNie's Avatar

    Options 1 works, but you lose scope. Your 4th option has work to resolve it, and should be fine.

    Option 2 will not work, because "tick" doesn't exist (this.tick does)

    Option 3 should work, however you have to have a "handleEvent" method defined to handle the event callback. This is the equivalent of the deprecated addListener.

    We usually proxy the calls using a closure. It sucks that we have to do this, but it works. Something like this:

    function closure(method, scope) {
        return function() {
            return method.apply(scope, arguments);
        }
    }
    
    obj.addEventListener("click", closure(this.tick, this));
    

    BUT

    In the latest CreateJS EventDispatcher (NEXT in GitHub, and released soon as 0.7.0, there are some shortcuts to get around this. The new "on" method gives you a way to pass scope, as well as some other goodies.

    myObject.on("click", this.handleEvent, this);
    

    Read more about the event model changes here
    http://blog.createjs.com/event-model-updates/

    Cheers!

  5. Lanny McNie closed this discussion on 20 Sep, 2013 07:49 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac