Question

I have a simple js structure like this :

var Waiting = (function () {

    function Waiting() {
        this.timer;
    }

    Waiting.prototype.show = function () {
        var self = this;

        clearTimeout( self.timer );
        self.timer = setTimeout( function(){ self.hideLogo(); },3000);
    }

     Waiting.prototype.hideLogo = function () {
         console.log("ok i passed timeout");
     };

     return Waiting;
})();

As expected, I get the “ok i passed timeout” log on every browser the first time I execute the show function (which called the hideLogo one). The problem appears in IE9 when I called for the second time the show function. This time, the hideLogo function is never called (log never appears in IE console). I tried a lot of things without any success.

If anyone as an idea…

Answer 1

When you’re using setTimeout, the function that is being called looses the context: in other words this doesn’t post to the instance on which the method is called anymore. You’re using self to cancel this issue out, but self is, itself, an iffy word (as in reserved keyword). Perhaps use that, and use an IIFE in the setTimeout call:

this.timer = setTimeout((function (that)
{
    return function()
    {
        clearTimeout(that.timer);//perhaps clear timeout here?
        that.hideLogo.apply(that,[]);//double dutch, the apply _shouldn't_ be required
    };
}(this)), 3000);

At first glance, that’s the only thing I can see that might be the issue with your code: the clearTimeout call shouldn’t be an issue, but I like to call it at the end of the timeout itself, and the self ambiguity thing. Let me know if this changes anything for you!