Javascript setTimeout not stopping on clearInterval()

clearinterval, javascript, settimeout

Solution

You use `clearTimeout()` with `setTimeout()`.

You don't use `clearInterval()` with `setTimeout()`. `clearInterval()` goes with `setInterval()`.

You also have a structural problem in your code. You are passing around clr and clr2 as arguments and expecting the original values of those to be modified and they are not.

You can fix that by putting them both in an object and passing the object like this:

animate("99%", $("#foo"));
//animate("75%", $("#bar"));

function loop(timers, ele, rand, last, delay) {
    clearTimeout(timers.clr);
    clearTimeout(timers.clr2);
    inloop(timers, ele, rand, last, delay);

    if (rand >= last) {
        clearTimeout(timers.clr);
        clearTimeout(timers.clr2);
    }
    else {
        timers.clr2 = setTimeout(function () {
            loop(timers, ele, rand, last, delay);
        }, 2500);
    }

}
function inloop(timers, ele, rand, last, delay) {
    ele.html((rand += 1) + "%");

    if (rand >= last) {
        clearTimeout(timers.clr);
        clearTimeout(timers.clr2);
    }
    else {
        timers.clr = setTimeout(function () {
            inloop(timers, ele, rand, last, delay);
        }, delay);
    }
}

function animate(end, display) {
    var timers = {clr: null, clr2: null};
    var ele = null;
    var rand = 0;  // initial number
    var last = 99; // last number
    var delay = 5; // inner loop delay

    ele = display;
    ele.html("0%");

    var idx = end.indexOf("%");
    if (idx >=0) {
        end = end.substring(0,idx);
    }
    last = parseInt(end);
    loop(timers, ele, rand, last, delay);
}
​

Working jsFiddle: http://jsfiddle.net/jfriend00/PEqeY/

Problem

How do you stop a timer when clearInterval() does not stop it? The purpose of this code is to animate a number from 0 upwards until it reaches the end (eg animate from 0... 75%). But the timer does not stop when I call clearInterval(): http://jsfiddle.net/pwYEe/2/ ``` <div id="foo"></div> <div id="bar"></div> animate("99%", $("#foo")); // doesnt stop animate("75%", $("#bar")); // doesnt stop function loop(clr, clr2, ele, rand, last, delay) { clearInterval(clr); clearInterval(clr2); inloop(clr, clr2, ele, rand, last, delay); if (rand >= last) { clearInterval(clr); clearInterval(clr2); } else { clr2 = setTimeout(function () { loop(clr, clr2, ele, rand, last, delay); }, 2500); } } function inloop(clr, clr2, ele, rand, last, delay) { ele.html((rand += 1) + "%"); if (rand >= last) { clearInterval(clr); clearInterval(clr2); } else { clr = setTimeout(function () { inloop(clr, clr2, ele, rand, last, delay); }, delay); } } function animate(end, display) { var clr = null; var clr2 = null; var ele = null; var rand = 0; // initial number var last = 99; // last number var delay = 5; // inner loop delay ele = display; ele.html("0%"); var idx = end.indexOf("%"); if (idx >=0) { end = end.substring(0,idx); } last = parseInt(end); loop(clr, clr2, ele, rand, last, delay); } ```

Original source