當用戶離開窗口時，setInterval不會被清除

我有一個codepen demo，我已經開始使用setTimeout和setInterval的幾個實例。如果用戶離開頁面，我發現setInterval存在問題。當用戶離開窗口時，setInterval不會被清除

您可能會注意到，如果您在此間隔運行時離開頁面，這些數字將一直持續增加。間隔基本上沒有被清除。這工作得很好，否則。

以下是setTimeout中的一個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在我的if/else語句，但我根本無法得到的時間間隔，如果用戶離開頁面清除。任何其他方式，我可以接近這個setInterval？這只是一個JavaScript限制嗎？

更新

奇怪的是，當我登錄了x值，控制檯顯示它正確地顯示在-1到-4號。 clearInterval不能從另一個窗口運行？

來源

2013-10-16 Brian Phillips

看看瀏覽器如何處理關閉選項卡計時器。 iirc他們永遠不會停下來，他們只是放慢速度。 – rlemon

@rlemon你是對的 - 「當選項卡處於非活動狀態時，每秒最多隻能調用一次該函數。」從[這個問題]（http://stackoverflow.com/questions/6032429/chrome-timeouts-interval-suspended-in-background-tabs）。有趣的 –

作爲一個方面說明：當關閉標籤時，requestAnimationFrame完全停止。我意識到這與這個問題無關，但很高興知道：P – rlemon

可以代替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);

來源

2013-10-16 14:35:16

這是個竅門。 Chrome仍然會減慢'setInterval'，所以如果我離開屏幕，它必須趕上，但它不再溢出:-)謝謝！ –

@BrianPhillips很高興我可以幫助:) –

當用戶離開窗口時，setInterval不會被清除

回答

相關問題