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...

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...

• javascript
• object
• internet-explorer-9
• settimeout

• remove the self and try using directly the this...you get the error yet? – Toping Commented Feb 5, 2013 at 10:11
• How do you call show? Please post the code. – Bergi Commented Feb 5, 2013 at 10:12
• 1 @Ark: No, that would just introduce another error. – Bergi Commented Feb 5, 2013 at 10:12

3 Answers 3

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!

I am not really sure how you'd call show the second time with the code provided, maybe you create a new Waiting()?

Here is what worked for IE8

var Waiting=(function () {

    function Waiting() {
        this.timer;
    }

    Waiting.prototype.show = function () {
        var self = this;
        console.log("will clear pref timeout");
        clearTimeout( self.timer );
        self.timer = setTimeout( 
          function(){ 
            self.hideLogo(); 
           },30);
    }

     Waiting.prototype.hideLogo = function () {
         console.log("ok i passed timeout");
     };
     return new Waiting();
})();
// shows only one time
Waiting.show();
Waiting.show();
// next one will show because it lets the prefious one
// finish without clearing the pref timeout.
setTimeout(function(){
Waiting.show();
},1000);

Try:

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

Worked for me on IE and Chrome. IE is very behind on everything.