사용자가 창을 닫을 때 setInterval이 지워지지 않음

Question

나는 을 가지고 있는데, 이는 setTimeout 및 setInterval의 여러 인스턴스를 사용합니다. 사용자가 페이지를 떠날 경우 setInterval에 문제가 있음을 발견했습니다.

이 간격이 실행되는 동안 페이지를 나가면 숫자가 계속 증가합니다. 간격은 기본적으로 지워지지 않습니다. 그렇지 않으면 잘 작동합니다.

다음은 내에있는 setInterval의 인스턴스 중 하나의 예입니다.

setTimeout(function() { 
    var x = parseInt($one.text()); 

    handle = setInterval(function() { 
    if (x > -5) { 
     x--; 
     $one.html(x + 'px'); 
    } 
    else { 
     clearInterval(handle); 
     handle = null; 
    } 
    }, 200); 

    $box.animate({ 
    boxShadow: '-5px 0 0 0 #333' 
    }, 2000); 

}, 7000); 

내가 모두 clearInterval(handle) 및 handle = null를 추가하려고했습니다 내/else 문 경우,하지만 난 단순히 사용자가 페이지를 떠나면 간격이 취소 얻을 수 없습니다. 내가 접근 할 수있는 다른 방법이 setInterval일까요? 이것은 자바 스크립트의 제한 사항입니까? 나는 x 값을 로그인 할 때

이상하게

업데이트은 콘솔이 제대로 -1을 통해 -4 숫자를 표시 보여줍니다. clearInterval이 다른 창에서 실행되지 않습니까?

Answer 1

이 같은 setInterval 대신 setTimeout을 사용할 수 있습니다 : -에서

setTimeout(function() { 
    var x = parseInt($one.text()); 
    function callOnTimeOut(){ 
     setTimeout(function() { 
      if (x > -5) { 
       x--; 
       $one.html(x + 'px'); 
       callOnTimeOut(); 
      } 
     }, 200); 
    } 
    callOnTimeOut(); 

    $box.animate({ 
     boxShadow: '-5px 0 0 0 #333' 
    }, 2000); 

}, 7000);