三張圖理解JS高級定時器

圖片出自JS高程（第三版）

圖一解讀：JS運行於單線程的環境中：頁面載入時授限制性<script>元素中的代碼；以後JS進程將等待更多代碼執行；當進程空閒時，下一個代碼會被觸發並馬上執行。

當有大量JS邏輯代碼待處理時，JS進程就會擁堵（由於要在同一個進程中，按順序挨個執行），表現上就是網頁卡死。

圖二解讀：定時器能夠在指定時間把定時器代碼加入待執行隊列，但並不能保證代碼執行時機，待執行隊列中的代碼要等JS進程空閒時才能執行。

圖三解讀：setInterval每隔delay間隔嘗試建立定時器代碼實例並加入待執行隊列，但爲了不定時器代碼連續運行好幾回，若當前待執行隊列中已有定時器代碼實例，將不會建立新的定時器代碼實例加入待執行隊列。

也就是說setInterval定時器每隔delay間隔觸發一次，嘗試加入隊列，JS擁堵時段將直接忽略本次操做。

這能夠保證setInterval定時器推入隊列的間隔必定不小於delay間隔，但不能保證其執行間隔。能夠採用鏈式setTimeout能夠保證其執行間隔。

綜：以上是對定時器的我的理解，對此的重要應用有幾點——數組分塊、函數節流和防抖等。主要是針對JS特性，經過設計實現方式來優化其性能問題。