setTimeout(f,0)的作用及使用場景

介紹下setTimeout(0)的作用及簡單應用場景

作用簡述

setTimeout(f,0)的作用很簡單，就是為了把f放到運作隊列的最後去執行。

就是說，無論setTimeout(f,0)寫在哪，都可以保證在隊列的最後執行，因為它是異步操作。

js主線程會優先完成同步任務，在同步任務執行過程中，不會執行其它任務,setTimeout的定時到了執行時間，JS主線程仍然還在執行同步任務，setTimeout所指定的方法并不會立刻執行,當js主線程空閑，異步任務隊列中隻有setTimeout執行的方法時,才會繼續執行setTimeout裡的function。

setTimeout(f,0)做的事情：在指定delay約0秒後，将指定方法f作為異步任務添加到異步任務隊列中。

為啥是異步操作?

通過chrome浏覽器架構學習一文我們知道setTimeout是由定時觸發器線程來控制的，另起了一個線程，是以是異步操作。

計時精度

setTimeout第二個參數為0表示立即執行(實際上有一定延遲,視浏覽器計時精度而定)。

⬇️

計時精度如下：

IE8及更早版本的計時器精度為15.625ms

IE9及更晚版本的計時器精度為4ms

Firefox和Safari的計時器精度大約為10ms

Chrome的計時器精度為4ms

當使用這個方法的時候，浏覽器會另起一個線程，來執行setTimeout裡面的函數，而原有的線程繼續執行。

至于與setTimeout後繼的同步函數的執行順序或者執行快慢，并沒有固定的答案，視浏覽器而定了。

簡單應用場景

監控input或者textarea中文本的變化

當使用滑鼠右鍵操作進行粘貼或剪切時，控制台輸入的文本内容是操作前的舊内容。為了擷取操作後的新文本内容，可以将對文本的擷取和處理放在setTimeout中延時執行

// 響應鍵盤輸入，粘貼和剪切事件
$('#input').on('keyup paste cut', function() {
  var $this = $(this);
  setTimeout(function(){ // 使滑鼠粘貼和剪切時，輸入框内内容為最新
    console.log($this.val());
  }, 0)
});           

setTimeout能夠影響代碼的執行順序和時機,合理使用能夠讓更重要的代碼優先執行,fix特定場景下奇怪的bug等等。