本文僅是技術驗證，記錄，交流，不針對任何人。有冒犯的地方，請諒解。本文首發於https://vsnail.cn/static/doc/blog/setTimeout.html
本想喝著coffee,看著娃,過一個恬靜的週六。occasionally,瀏覽到一段程式碼，覺的蠻有趣。
setTimeout(function(){console.log(1)},30)
setTimeout(function(){console.log(2)},10)
setTimeout(function(){console.log(3)},0)
let now = new Date();
while(new Date() - now<100){
}
console.log(0);
複製程式碼估計大部分人都會知道第一個輸出會是0（如果還不知道為什麼0會先輸出，也沒有關係，看完整篇文章你就會知道了）.
但是後面輸出的順序到底是3>2>1還是1>2>3，估計就有爭議了。
回手掏，鬼刀一開看不見，走位走位，手裡幹
走位，走位（簡單使用setTimeout）
想知道上面的答案？等著，讓我們先來看看setTimeout相關基礎。
setTimeout() 方法可以設定一個定時器，該定時器在定時器到期後執行一個函式或指定的一段程式碼。
最簡單的示例：
100ms後彈出系統對話方塊。（非嚴謹的，用俚語表述的需求。。。莫怪）
setTimeout(function(){
alert('走位，走位')
}，100)
複製程式碼好簡單的，是不？地球人都知道的東西，再寫就沒意思了。接下來寫點可能會不知道的東東。
-
1.函式引數個數
let timer = window.setTimeout(fun[,delay,param1,param2,...]);
我們常用的就兩個引數，估計一個引數，或者多於兩個引數的情況用的比較少。只有一個引數時，延遲時間預設為0；有多於兩個引數時，除開第一和第二引數的其他引數，我們稱之為“附加引數”。附加引數都會做為回撥函式的引數傳遞。
let func = function(a,b){
console.log(a+b);
}
setTimeout(func,100,10,20); //30
複製程式碼- 2.用於防抖
防抖:在事件被觸發n秒後再執行回撥，如果在這n秒內又被觸發，則重新計時。
function debounce(fn, wait) {
var timer = null;
return function () {
var context = this
var args = arguments
if (timer) {
clearTimeout(timer);
timer = null;
}
timer = setTimeout(function () {
fn.apply(context, args)
}, wait)
}
}
複製程式碼-
3.輪循任務（setInterval）
js中可以使用setInterval開啟輪詢，但是這種存在一個問題就是執行間隔往往就不是你希望的間隔時間。使用setTimeout構造輪詢能保證每次輪詢的間隔。 -
4.程式切片 我們都清楚
js是單執行緒的，意味著js處理大資料的時候，容易處於‘假死’狀態。那麼這個時候，我們可以利用setTimeout進行切片，來避免‘假死’狀態的出現。
let func = function(index){
....
}
for(let i=0,l=10000000000;i<l;i++){
(function(index){
setTimeout(function(){func(index)},0)
})(i)
}
複製程式碼基本setTimeout常用的用法就是這些。
回手掏（setTimeout原理及javaScript執行機制之event loop）
走位完了，讓我們一起回手掏掏他們的原理和機制。
js 單執行緒
我們都知道，現代瀏覽器每個標籤頁就是一個程式，每個程式下面又包含了各種執行緒，比如javaScript執行緒，渲染執行緒，請求執行緒等等。也就是說js是單執行緒的。估計有人要問了為什麼js是單執行緒呢，為什麼不是多執行緒呢？其實這和js的用途有關係。作為瀏覽器指令碼語言，JavaScript的主要用途是與使用者互動，以及操作DOM。這決定了它只能是單執行緒，否則會帶來很複雜的同步問題。比如，假定JavaScript同時有兩個執行緒，一個執行緒在某個DOM節點上新增內容，另一個執行緒刪除了這個節點，這時瀏覽器應該以哪個執行緒為準？所以，為了避免複雜性，從一誕生，JavaScript就是單執行緒，這已經成了這門語言的核心特徵，將來也不會改變。為了利用多核CPU的計算能力，HTML5提出Web Worker標準，允許JavaScript指令碼建立多個執行緒，但是子執行緒完全受主執行緒控制，且不得操作DOM。所以，這個新標準並沒有改變JavaScript單執行緒的本質。
OK，js是單執行緒，那麼我們可以得出setTimeout絕對不是開啟另一個執行緒來實現非同步的。那setTimeout是如何達到非同步效果的呢？
任務佇列
在js中，所有任務都分為同步任務和非同步任務兩大類。同步任務指的是，在主執行緒上排隊執行的任務，只有前一個任務執行完畢，才能執行後一個任務；非同步任務指的是，不進入主執行緒、而進入"任務佇列"（task queue）的任務，只有"任務佇列"通知主執行緒，某個非同步任務可以執行了，該任務才會進入主執行緒執行。
（1）所有同步任務都在主執行緒上執行，形成一個執行棧（
execution context stack）。
（2）主執行緒之外，還存在一個"任務佇列"（task queue）。只要非同步任務有了執行結果，就在"任務佇列"之中放置一個事件。
（3）一旦"執行棧"中的所有同步任務執行完畢，系統就會讀取"任務佇列"，看看裡面有哪些事件。那些對應的非同步任務，於是結束等待狀態，進入執行棧，開始執行。
（4）主執行緒不斷重複上面的第三步。
只要主執行緒空了，就會去讀取"任務佇列"，這就是JavaScript的執行機制。這個過程會不斷重複。
"任務佇列"是一個先進先出的資料結構，排在前面的事件，優先被主執行緒讀取。主執行緒的讀取過程基本上是自動的，只要執行棧一清空，"任務佇列"上第一位的事件就自動進入主執行緒。
Event loop
主執行緒從"任務佇列"中讀取事件，這個過程是迴圈不斷的，所以整個的這種執行機制又稱為Event Loop（事件迴圈）。
這裡一定要分清楚task queue 和Event loop概念。之前，發現很多人總是分不清楚task queue 和 Event loop概念。說setTimeout原理時，每每有人說到是將回撥函式放入到事件佇列裡面，然後。。。。。。；真覺的這樣的說法不太好。
setTimeout理解
個人推測，每當呼叫setTimeout方法，實際上是向一個快取物件寫入一個鍵值對（以數字為鍵，以回撥函式為值）。當到達指定延遲時間後，才將回撥函式放入到task queue中，等待進入執行棧。
獨特例子分析
在回手掏完之後，基本上setTimeout以及js執行機制應該大概明白了。通過以上的原理及機制，我們來分析一下下面的幾個例子（包含之前沒有說道的setTimeout的注意項）：
開篇程式碼解析
setTimeout(function(){console.log(1)},30)
setTimeout(function(){console.log(2)},10)
setTimeout(function(){console.log(3)},0)
let now = new Date();
while(new Date() - now<100){
}
console.log(0);
複製程式碼這段程式碼在執行棧中執行順序為：
- 宣告變數
now； - 向setTimeout快取物件中放入延遲30毫秒執行的回撥函式（這個回撥函式我們標記為func3）；
- 向setTimeout快取物件中放入延遲10毫秒執行的回撥函式（這個回撥函式我們標記為func2）；
- 向setTimeout快取物件中放入延遲0毫秒執行的回撥函式（這個回撥函式我們標記為func1）；
- 向變數now賦值當前時間；
- 一直迴圈100ms； 6.1. 在0ms時，將回撥函式func1放入task queue中。 6.2. 在10ms時，將回撥函式func2放入task queue中。 6.3. 在30ms時，將回撥函式func3放入task queue中。
- 向控制檯列印0；
- 執行棧空閒，從
task queue中提取第一個任務（func1）。執行完func1後，再從task queue 中提取一個任務（func2）。執行完func2後，再從task queue 中提取一個任務（func3）.
以上就是整個程式碼的大概執行流程。因此，我們得到的列印順序為 0>3>2>1。這個裡面主要是要理解，呼叫setTimeout方法並不是直接將回撥函式放入task queue中，而是等到到達指定延時後，才將回撥函式放入task queue中。
最大延遲時長
也許你經常用幾秒或者幾十秒做延遲時間，估計你很少會想到setTimeout能設定的最大的延遲時間是多少呢？或者如果超出setTimeout的最大延遲時長，又會怎麼樣？
在一篇文章上看到過，setTimout最大延遲時長是用32位有符號數儲存的，因此他的最大值應該是Math.pow(2,31)-1=2147483647,那麼換算成天，大約就是24.8天。如果設定的時長大於2147483647，那麼setTimeout的延時時長將會自動設定為0；
setTimeout(function(){console.log(1)},2147483648)
setTimeout(function(){console.log(2)},2147483647)
複製程式碼你會看到，控制檯會立即輸出1，而2卻沒有輸出，如果上面的結論是正確的，要想看到2，估計要等24.8天了。嘿嘿，反正我是不準備等的了。。。又想嘗試的兄弟，可以試了以後告知下。
延時時長0
在MDN上看到這麼一句話，“delay取預設值0，意味著“馬上”執行，或者儘快執行。”
也就是說將延時時長設定為0，是在有條件的情況下儘快執行。但真的是0毫秒就放入task queue中嗎？
我們來看段程式碼：
setTimeout(function(){
console.log(2)
},2)
setTimeout(function(){
console.log(6)
},6)
setTimeout(function(){
console.log(1)
},1)
setTimeout(function(){
console.log(3)
},3)
setTimeout(function(){
console.log(0)
},0)
複製程式碼這樣的一段程式碼，可能會有些人認為他的輸出結果是：0>1>2>3>6.實際情況卻不是這樣的，實際輸出確是1>0>2>3>6.
有人解釋說，這是因為從執行延時1ms的延時函式，到執行0ms的延時函式，中間超過了1ms，導致延時1ms的回撥函式先於延時0ms的回撥函式進入task queue中。但是這種說法真不能苟同，如果這樣都需要1ms那麼js的執行效率也太低了。而且可以在1ms的延時函式 和0ms的延時函式列印時間戳，可以發現，根本不可能是執行超過1ms導致的結果。
那麼我們將1ms的延時函式和0ms的延時函式任意交換位置可以發現，誰在前面誰先進入task queue。那麼可以大膽推論，其實延時0ms與延時1ms是等價的（這個結論是自我推導的，不一定正確）。因此才有了1>0>2>3>6輸出順序。
最小間隔時長
有人會說上面例子輸出結果是因為setTimeout的最小間隔時長導致的。最小間隔時長，是個很噁心的概念，最初接觸的時候沒有正確理解，導致一度認為這個最小間隔時長有問題。
我們來看看最小間隔時長在MDN上面的解釋。在MDN上面它不叫“最小間隔時長”，而是叫做“最小延遲時間”。在以前，最小間隔時長通常為10ms，現在的現代瀏覽器通常為4ms（根據各個瀏覽器的不同會有些差異）。一直以來，都被“最小延遲時間”這個名詞所誤導，總認為延時時長必須大於等於最小延遲時間。但是，各種測試總是實現不了或者驗證不了這個“最小延遲時間”。在讀MDN的時候，發現它有這麼一句話"這通常是由於函式巢狀導致（巢狀層級達到一定深度），或者是由於已經執行的setInterval的回撥函式阻塞導致".
在瀏覽器中，setTimeout()/setInterval() 的每呼叫一次定時器的最小間隔是4ms，這通常是由於函式巢狀導致（巢狀層級達到一定深度），或者是由於已經執行的setInterval的回撥函式阻塞導致的
這才煥然大悟，原來“最小延遲時間”是有限制條件的，他的限制條件就是函式巢狀到達一定深度，或者setInterval回撥阻塞。
那麼接下來我們就用一段程式碼驗證下：
function doFunc(count){
console.time('time total:')
let timeFunc = function(){
if(count>=0){
setTimeout(timeFunc,0)
count --;
}else{
console.timeEnd('time total:')
}
}
timeFunc()
}
doFunc(10)
複製程式碼如果沒有最小延遲時間的限制，那麼在只有這段程式碼的環境下執行，那麼應該會很快執行完。但是在chrome中實際輸出確是33.2451171875ms。這就直接證明了最小延遲時間的存在，並且觸發他的條件是函式巢狀到達了一定深度。
好吧，個人覺的setTimeout的小九九也就這些了，沒有再寫下去的必要了。比如setTimeout回撥函式中的this，怎麼清除當前建立的所有setTimeout等等。類似這些地球人都知道的事情，估計也不是您看這篇文章的目的了。
走吧，客官們，嗨把刺激戰場嘍。。。。
參考文獻
1、《window.setTimeout》developer.mozilla.org/zh-CN/docs/…
2、《JavaScript 執行機制詳解：再談Event Loop》www.ruanyifeng.com/blog/2014/1…
3、《setTimeout最小間隔4ms的問題》segmentfault.com/q/101000001…
4、《setTimeout初探(一)：4ms的真偽》 blog.csdn.net/yiifaa/arti…
5、 《setTimeout的那些事》imweb.io/topic/56ac6…