JS中定時器線程理解

最近在準備面試，對於JS原理性的文章，感受頗有必要系統整理下，沒必要每一次都要查詢資料，節約時間。

問題

setTimeout(function(){
    console.log("開始執行定時器回調: "+ new Date())
    console.log("我是定時器")
},0)

你們以爲這個定時器定時時間設爲0，有意義嗎？是否以爲上述代碼效果等同於

console.log("開始執行定時器回調: "+ new Date())
console.log("我是定時器")

實踐是檢驗真理的最好途徑。咱們不排斥拿來主義，可是若是能本身實踐驗證，對於提高自身格物致知的精神頗有裨益。針對上述問題，咱們用兩個實驗來解開答案：
實驗一：

console.log("1")
console.log("我是定時器")
console.log("2")

打印結果

實驗二：

console.log("1")
setTimeout(function(){
    console.log("我是定時器")
},0)
console.log("2")

打印結果

經過上述兩個實驗結果，咱們能夠得知 定時器定時爲0時，JS執行到定時器這一步，並非直接開始執行定時回調，而是執行了後續代碼以後，才執行。

那爲何會這樣呢？
咱們仍然拿兩個例子來講明：
實驗三：

console.log("1")
    console.log("定時器線程開始計時: "+ new Date())
    setTimeout(function(){
        console.log("開始執行定時器回調: "+ new Date())
    },5000)
    for(var i=0;i<500;i++){
        console.log("我是循環")
    }
    console.log("事件隊列最後一位: "+ new Date())

打印結果：

從結果中能夠看出，從定時器線程開始定時，到定時5秒結束後，將定時回調事件放入事件隊列中執行，用了5秒。

實驗四：

console.log("1")
    console.log("定時器線程開始計時: "+ new Date())
    setTimeout(function(){
        console.log("開始執行定時器回調: "+ new Date())
    },5000)
    for(var i=0;i<50000;i++){
        console.log("我是循環")
    }
    console.log("事件隊列最後一位: "+ new Date())

打印結果：

從結果中能夠看出，從定時器線程開始定時，到定時5秒結束後，將定時回調事件放入事件隊列中執行，用了9秒。

兩次結果不一致，是由於JS代碼執行到定時器時，此時定時器線程開始定時，定時時間到以後，將定時回調事件推入事件隊列而最後，JS線程依據事件隊列中順序執行。而之因此有的延時5秒，有的延時9秒，是由於若是定時器開始計時時，JS事件隊列中執行剩餘的事件小於5秒，則定時結束後，將定時回調事件推入隊列中，JS可以當即執行定時回調事件，因此是5秒；而若是JS事件隊列中執行剩餘的事件大於5秒，那麼在定時結束後，將定時回調事件推入隊列後，還需一些時間來執行定時回調事件以前的事件，因此爲9秒。