Javascript setTimeout不停在clearInterval（）

Question

當clearInterval（）不停止它時，如何停止計時器？

此代碼的目的是從0開始向上動畫一個數字，直到到達最後（例如從0 ... 75％的動畫）。但是，當我調用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); 
} 

Answer 1

您使用clearTimeout()與setTimeout()。

您不要使用clearInterval()和setTimeout()。 clearInterval()結合setInterval()。

您的代碼中也存在結構性問題。你正在繞過clr和clr2作爲參數，並期望那些被修改的原始值不是。

您可以修復，通過把他們都在一個對象，並傳遞對象是這樣的：

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); 
} 
​ 

工作的jsfiddle：http://jsfiddle.net/jfriend00/PEqeY/