Question

If I have a function like so:

function x()
{
    animate(a, 2000);
    animate(b, 3000);
    animate(c, 4000);
}

Where – a, b & c – are variables representing elements on the page, and the number is a parameter passed to an animate() function that uses it as a duration value for a timeout, like so:

function animate(src, dur)
{
    setTimeout(function() {
        src.style.opacity = 1;
    }, dur);
}

Everything so far is fine, but if I want the ability to break out of the animation loop, how do I go about it? Will clearTimeout() be what I’m looking for?

Answer 1

Variables that have been assigned a timeout, may be passed to the clearTimeout function, which will cease the function. You can store these variables in an array and easily clear all timeouts by iterating this array and passing the timeout to the clearTimeout function.

var timeouts = [];

/* Save timeouts into a variable and push to an array */
function animate(src, dur)
{
    var timeout = setTimeout(function() {
        src.style.opacity = 1;
    }, dur);
    timeouts.push(timeout);
}

/** Clear all timeouts**/
function clearTimeouts(){
   for(var i = 0; i < timeouts.length; i++){
     clearTimeout(timeouts[i]);
   }
}

//Create timeouts
x();
//Invoke clearTimeouts
clearTimeouts();