요청 애니메이션 프레임 루프

Question

이 코드 https://gist.github.com/joelambert/1002116을 가로 질러 와서 내가 루프를 만들고

var tick = 0; 
var dor = requestInterval(function(){ 
    tick++; 
    console.log("hi", tick) 
    if (tick > 10){ 

    stop(); 
    } 
},300) 

function stop(){ 
    console.log("stop") 
    clearRequestInterval(dor); 
} 

그것을 막으려

함께 놀아 생각하지만 clearRequestInterval는 타이머를 삭제하지 않습니다 . 하지만 단추의 이벤트 처리기에서 호출하려고 할 때 작동합니다. 내가 놓친 게 있니?

나는 부착 가지고 codepen http://codepen.io/srajagop/pen/KgbbpR

Answer 1

@Bergi 당신이 사용하려고 예제 코드가 깨진 것이 바로, 그것은 간격 함수 자체 내에서 간격 타이머를 취소 지원하지 않습니다. 당신은 비동기 적으로 clearRequestInterval를 호출하여 해당 해결할 수 있습니다

function stop() { 
    console.log("stop"); 
    window.setTimeout(function() { 
    clearRequestInterval(dor); 
    }, 0); 
} 

아니면 더 나은, 당신은이 간격 함수 내에서 취소 된 경우에도 자체 일정을 변경하지 예제 코드를 수정 할 수있다.