setInterval（）瀏覽器隊列

Question

我知道setInterval函數幾乎是單線程的。但是，如果我們將時間設置爲一個很小的值像50毫秒：

setInterval(function() 
{ 
    // do really heavy stuff 
}, 50); 

那麼第一個生成的事件可能無法按時完成那麼我想第二個事件是第三放入瀏覽器的隊列，然後，第四等所以基本上，這意味着瀏覽器的隊列越來越大實在是快，這顯然不是一件好事（是嗎？）

到目前爲止，我都與這兩個解決方案：

1）等待第一個事件完成，然後調用第二個（使用超時）：

var func = function() 
{ 
    setTimeout(function() 
    { 
    // do really heavy stuff and when it's finished call again 
    func(); 
    }, 50) 
} 

2）創建一個監視事件的狀態的標誌：

var isIntervalInProcess = false; 
setInterval(function() 
{ 
    if (isIntervalInProcess) 
    return false; 

    isIntervalInProcess = true; 

    // do really heavy stuff 

    isIntervalInProcess = false; 

}, 50); 

是擺脫事件overlaping的這些最佳做法？

Answer 1

這些最佳實踐是擺脫事件重疊的最佳做法嗎？

您提供的第一個示例是用於避免setInterval的缺陷的常用技術。就「最佳實踐」而言，你應該選擇正確的技術來適應正確的情況（是的，這很不幸很含糊）。

動畫中使用setInterval短時間使用短時間間隔很常見。在這些情況下，應該簡化回調以提高性能並輕鬆取消。 jQuery使用15ms的延遲，而且效果很好。

對於運行時間較長的函數，最好將它們分解爲異步函數隊列。反覆排隊相同的功能與您的第一個示例setTimeout完全相同。

你的第二個例子存在的問題是回調隊列中的項目永遠不會按順序執行。在第一個函數執行完之後，第二個排隊函數將只被稱爲，此時可能會排隊2或3個其他函數。

有，但是一個cached polling技術將允許回調的主體來執行，只有當發生了狀態變化：

(function() { 
    var temp; 
    setInterval(function() { 
     var val; 
     val = getSomeValue(); //some fast data accessor 
     if (val === temp) { 
      return; //break out of the function early 
     } 
     ...code to execute when the state has changed... 
     temp = val; //cache the last state 
    }, shortDelay); 
}());