setTimeout時間設定為0詳細解析，settimeout時間解析

setTimeout時間設定為0詳細解析，settimeout時間解析

前言

本文主要給大家介紹了關於setTimeout時間設定為0的相關內容，分享出來供大家參考學習，下面話不多說了，來一起看看詳細的介紹吧。

1、開胃菜，setTimeout為何物

首先看一下w3school上面對於setTimeout的解釋

setTimeout(fn,millisec) 方法用於在指定的毫秒數後調用函數或計算運算式。

很簡單，setTimeout() 只執行 fn 一次，到底什麼時候執行取決於第二個參數millisec設定的毫秒數，所以很多人習慣上稱之為延遲，無非就是延遲一段時間後再執行裡面的代碼。

setTimeout(function(){ console.log('我是setTimeout');}, 1000);

正常情況下，我是setTimeout 這句話並不會馬上輸出而是等1000毫秒以後會在瀏覽器的控制台輸出。

2、主菜，js是單線程的

OK，看一個例子，這個例子的輸出結果是什嗎？

setTimeout(function(){ console.log(1);}, 0);console.log(2);console.log(3);

出乎一些人的意料，得到的結果竟然是2、3、1。這似乎不按套路出牌啊，明明是等待了0毫秒也就是不等待直接輸出啊，為啥1卻在最後輸出了呢？

這就需要搞清楚一個很重要的概念：js是單線程的，單線程就意味著，所有任務需要排隊，前一個任務結束，才會執行後一個任務。如果前一個任務耗時很長，後一個任務就不得不一直等著。

其實很好理解，就像大家去超市買東西一樣，所有買東西的人都需要在收銀台排隊結賬，正常情況下每個收銀台同一時間只能為一位顧客結賬，這位顧客結賬完成才能為下一位顧客服務。

而瀏覽器的核心是多線程的，它們在核心制控下相互配合以保持同步，一個瀏覽器至少實現三個常駐線程：javascript引擎線程，GUI渲染線程，瀏覽器事件觸發線程。

• javascript引擎是基於事件驅動單線程執行的，JS引擎一直等待著任務隊列中任務的到來，然後加以處理，瀏覽器無論什麼時候都只有一個JS線程在運行JS程式。
  
• GUI渲染線程負責渲染瀏覽器介面，當介面需要重繪（Repaint）或由於某種操作引發迴流(reflow)時,該線程就會執行。但需要注意 GUI渲染線程與JS引擎是互斥的，當JS引擎執行時GUI線程會被掛起，GUI更新會被儲存在一個隊列中等到JS引擎空閑時立即被執行。
  
• 事件觸發線程，當一個事件被觸發時該線程會把事件添加到待處理隊列的隊尾，等待JS引擎的處理。這些事件可來自JavaScript引擎當前執行的代碼塊如setTimeOut、也可來自瀏覽器核心的其他線程如滑鼠點擊、AJAX非同步請求等，但由於JS的單線程關係所有這些事件都得排隊等待JS引擎處理。（當線程中沒有執行任何同步代碼的前提下才會執行非同步代碼）
  

其實，當js代碼執行遇到setTimeout(fn,millisec)時，會把fn這個函數放在任務隊列中，當js引擎線程空閑時並達到millisec指定的時間時，才會把fn放到js引擎線程中執行。

setTimeout(fn,0)的含義是，指定某個任務在主線程最早可得的空閑時間執行，也就是說，儘可能早得執行。它在"任務隊列"的尾部添加一個事件，因此要等到同步任務和"任務隊列"現有的事件都處理完，才會得到執行。

HTML5標準規定了setTimeout()的第二個參數的最小值（最短間隔），不得低於4毫秒，如果低於這個值，就會自動增加。在此之前，老版本的瀏覽器都將最短間隔設為10毫秒。另外，對於那些DOM的變動（尤其是涉及頁面重新渲染的部分），通常不會立即執行，而是每16毫秒執行一次。這時使用requestAnimationFrame()的效果要好於setTimeout() 。

需要注意的是，setTimeout()只是將事件插入了"任務隊列"，必須等到當前代碼（執行棧）執行完，主線程才會去執行它指定的回呼函數。要是當前代碼耗時很長，有可能要等很久，所以並沒有辦法保證，回呼函數一定會在setTimeout()指定的時間執行。

3、甜品，setTimeout的妙用

其實setTimeout是有一些妙用的，這裡簡單列舉幾個。

函數去抖

讓一個函數在一定間隔內沒有被調用時，才開始執行被呼叫者法。比如當你在使用 google 搜尋內容的時候，有些關鍵詞輸入到一半，Google會展示一個可選列表，根據你當前輸入的內容作出的一個猜測聯想。需要監聽文字改變，每一次改變都會調用一次回呼函數，現在需要的一種實現是在使用者停止鍵盤事件一段時間後，去發送一個請求。

var debounce = function(method, context) { clearTimeout(method.tId); method.tId = setTimeout(function(){  method.call(context); },100);}

輪訓任務

js中可以使用setInterval開啟輪詢，但是這種存在一個問題就是執行間隔往往就不是你希望的間隔時間。

比如有個輪詢任務間隔是100ms，但是執行方法的時間需要450ms，那麼在200ms、300ms、400ms本來是計劃中執行任務的時間，瀏覽器發現第一個還未執行完，那麼就會放棄2、3、4次的任務執行，並且在500ms之後再次執行任務，這樣的話，其實再次執行的間隔就只有50ms。使用setTimeout構造輪詢能保證每次輪詢的間隔。

setTimeout(function () { console.log('我被調用了'); setTimeout(arguments.callee, 100);}, 100);

延遲js引擎的調用

var div = document.createElement('div');div.innerHTML = '我是一個div';div.setAttribute('style', 'width:200px; height:200px;background-color:#f00; ');document.body.appendChild(div);setTimeout(function() { console.log('我被調用了');}, 1000);

雖然setTimeout有一些妙用，但是他確實是在宏觀任務隊列中新增任務了，所以萬萬不能濫用啊。

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對幫客之家的支援。