Javascript: How to clear a non-global (closured) setTimeout?

Question

I'm trying to be a good citizen and keep as much out of the global scope as possible. Is there a way to access setTimeout variables that are not in the global scope?

So that, in this example how would someone cancel 'timer'?

myObject.timedAction = (function(){
    var timer;
        return function(){
            // do stuff

            // then wait & repeat       
            timer = setTimeout(myObject.timedAction,1000);
        };
})();

I've tried clearTimeout(myObject.timedAction.timer,1000); (without success), and not sure what else to try.

score 4 · Accepted Answer · answered May 08 '11 at 01:20

You can't unless you have a reference to timer, which you don't because you're declaring it as a variable in a scope. You can do something like:

myObject.timedAction = (function(){
    return function(){
        // do stuff

        // then wait & repeat       
        myObject.timedAction.timer = setTimeout(myObject.timedAction,1000);
    };
})();

clearTimeout(myObject.timedAction.timer);

Note that the above code will only ever allow ONE timer. If you need references to more than one timer, it needs to be adjusted.

Alex Wayne · Answer 2 · 2011-05-08T01:31:28.803

3

The whole point is that the inner variables are private, and inaccessible to the outside world. SO you have to change your approach a bit:

myObject.timedAction = (function(){
    var timer;
    var result = function(){
        // do stuff
        // then wait & repeat       
        timer = setTimeout(myObject.timedAction,1000);
    };

    result.cancel = function() {
        clearTimeout(timer);
    };

    return result;
})();

myObject.timedAction();       // start it
myObject.timedAction.cancel() // end it

So now the timer is only ever accessed from inside the closure. And yes, you can add methods to a function, because JS is awesome.

edited May 08 '11 at 01:31

answered May 08 '11 at 01:25

Alex Wayne

178,991
47
309
337

1

Wow, "method" and "function" in the same sentence. – Lightness Races in Orbit May 08 '11 at 01:29
@TomalakGeretkai remember a function inherits from `Object`. So it's just an object. – Raynos May 08 '11 at 02:39

score 1 · Answer 3 · answered May 08 '11 at 01:27

Put the timer handle in a property in your object:

myObject.timedAction = function(){
  // do stuff
  // then wait & repeat
  this.timer = window.setTimeout(function(){ myObject.timedAction(); },1000);
};

Note that you should wrap the call from the timer in a function, so that it's called as a method of your object instead of as a global function, otherwise you won't be able to access your object using this.

Now you can stop the timer using:

window.clearTimeout(myObject.timer);

Javascript: How to clear a non-global (closured) setTimeout?

3 Answers3