How to clear a javascript timeout thats set within a function

Question

I have a recursive type function in Javascript that runs like this:

function loadThumb(thumb) {
    rotate=setTimeout(function() {
        loadThumb(next);
    }, delay);
}

Note: I've simplified the function to make it easier to read.

I have "a" tags called like this

<a href="#" onclick="loadThumb(3); clearTimeout(rotate);">Load thumb 3</a>

However, they don't clearout the timer, the timer continues to cycle through the function irregardless of the clearTimeout() being called.

Any ideas why? I think it might have something to do with a scope problem or something like that.

Answer 1

Yeah, you need to make rotate a global variable. Simply declare it outside the function like so:

var rotate;
var delay = 1000;

function loadThumb(thumb) {
    alert("loading thumb: " + thumb);
    rotate = setTimeout(function() {
        loadThumb(thumb + 1);
    }, delay);
}

Also, you need to make sure you clear the timeout before you call loadThumb. Otherwise you'll clear the timer you just started.

<a href="#" onclick="clearTimeout(rotate); loadThumb(3);">Load thumb 3</a>

fiddle: http://jsfiddle.net/63FUD/

Answer 2

it may be the issue of scope so make rotate as global variable and call clearTimeout(rotate);

refer clearTimeout() example

Answer 3

It may be a scoping issue if you are not declaring rotate externally.

Try this:

var rotate = 0;
function loadThumb(thumb) {

    rotate=setTimeout(function() {
        loadThumb(next);
    }, delay);

}