Javascript setTimeout on 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

당신은 setTimeout()와 clearTimeout()를 사용합니다.

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/