定時器引發的思考

個人部落格上線歡迎來訪 http://www.zihanzy.com

定時器真的是定時執行的嗎？

定時器並不能保證真正定時執行，一般會延遲一點，但是也有可能延遲很長時間
如下例

 document.querySelector('button').onclick = function(){
            var start = Date.now()
            console.log('啟動定時器前')
            setTimeout(function(){
                console.log('定時器執行了',Date.now()-start)
            },200)
            console.log('啟動定時器後...')
}

可以看到定時器並不一定按照我們設定的時間去執行，而是有一定的延遲，不過這個延遲我們還能接受

上面說到定時器也可能延遲很長時間

 document.querySelector('button').onclick = function(){
            var start = Date.now()
            console.log('啟動定時器前')
            setTimeout(function(){
                console.log('定時器執行了',Date.now()-start)
            },200)
            console.log('啟動定時器後...')
            //做一個時間的工作
            for(var i = 0;i<1000000000;i++){

            }
 }

為什麼？
首先定時器的回撥函式是在主執行緒執行的，所有的js程式碼都是在主程式執行。
之所以延遲執行是因為for
它的執行機制是先執行初始化程式碼（也包含設定定時器、繫結監聽、傳送ajax）在執行回撥程式碼，因此要等初始化程式碼執行完畢後在設定定時器，所以看到上面的延遲 問題。

事件佇列與事件輪詢

瀏覽器執行先執行初始化程式碼，當發現有定時器，事件監聽時，將函式進行繫結並儲存到回撥佇列裡面，此時還沒有執行。當初始化程式碼執行完畢後從任務佇列中迴圈取出回撥函式放入執行棧中進行處理（一個接一個）

個人部落格上線歡迎來訪 http://www.zihanzy.com