如何經過setTimeout理解JS運行機制詳解

時間 2019-11-20

標籤如何經過 settimeout 理解運行機制詳解欄目 JavaScript 简体版

原文原文鏈接

setTimeout()函數：用來指定某個函數或某段代碼在多少毫秒以後執行。它返回一個整數，表示定時器timer的編號，能夠用來取消該定時器。jquery

例子面試

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

問：最後的打印順序是什麼？（若是不瞭解js的運行機制就會答錯）ajax

正確答案：1 3 2瀏覽器

解析：不管setTimeout的執行時間是0仍是1000，結果都是先輸出3後輸出2，這就是面試官經常考查的js運行機制的問題，接下來咱們要引入一個概念，JavaScript 是單線程的。閉包

2、 JavaScript 單線程jquery特效異步

JavasScript引擎是基於事件驅動和單線程執行的，JS引擎一直等待着任務隊列中任務的到來，而後加以處理，瀏覽器不管何時都只有一個JS線程在運行程序，即主線程。async

通俗的說：JS在同一時間內只能作一件事，這也常被稱爲「阻塞式執行」。函數

任務隊列oop

那麼單線程的JavasScript是怎麼實現「非阻塞執行」呢？spa

答：異步容易實現非阻塞，因此在JavaScript中對於耗時的操做或者時間不肯定的操做，使用異步就成了必然的選擇。
諸如事件點擊觸發回調函數、ajax通訊、計時器這種異步處理是如何實現的呢？

答：任務隊列

全部任務能夠分紅兩種，一種是同步任務（synchronous），另外一種是異步任務（asynchronous）。

任務隊列：一個先進先出的隊列，它裏面存放着各類事件和任務。

同步任務

同步任務：在主線程上排隊執行的任務，只有前一個任務執行完畢，才能執行後一個任務。

輸出
如：console.log()
變量的聲明
同步函數：若是在函數返回的時候，調用者就可以拿到預期的返回值或者看到預期的效果，那麼這個函數就是同步的。

異步任務

setTimeout和setInterval
DOM事件
Promise
process.nextTick
fs.readFile
http.get
異步函數：若是在函數返回的時候，調用者還不可以獲得預期結果，而是須要在未來經過必定的手段獲得，那麼這個函數就是異步的。

除此以外，任務隊列又分爲macro-task（宏任務）與micro-task（微任務），在ES5標準中，它們被分別稱爲task與job。

宏任務

I/O
setTimeout
setInterval
setImmdiate
requestAnimationFrame

微任務

process.nextTick
Promise
Promise.then
MutationObserver

宏任務和微任務的執行順序

一次事件循環中，先執行宏任務隊列裏的一個任務，再把微任務隊列裏的全部任務執行完畢，再去宏任務隊列取下一個宏任務執行。

注：在當前的微任務沒有執行完成時，是不會執行下一個宏任務的。

3、setTimeout運行機制jQuery插件

setTimeout 和 setInterval的運行機制是將指定的代碼移出本次執行，等到下一輪 Event Loop 時，再檢查是否到了指定時間。若是到了，就執行對應的代碼；若是不到，就等到再下一輪 Event Loop 時從新判斷。

這意味着，setTimeout指定的代碼，必須等到本次執行的全部同步代碼都執行完，纔會執行。

優先關係：異步任務要掛起，先執行同步任務，同步任務執行完畢纔會響應異步任務。

4、進階

     ? 
   
         console.log( 
         'A' 
         ); 
        
         setTimeout( 
         function 
         () { 
        
         console.log( 
         'B' 
         ); 
        
         }, 0); 
        
         while 
         (1) {}

你們再猜一下這段程序輸出的結果會是什麼？

答：A

注：建議先註釋掉while循環代碼塊的代碼，執行後強制刪除進程，否則會形成「假死」。

同步隊列輸出A以後，陷入while(true){}的死循環中，異步任務不會被執行。

相似的，有時addEventListener()方法監聽點擊事件click，用戶點了某個按鈕會卡死，就是由於當前JS正在處理同步隊列，沒法將click觸發事件放入執行棧，不會執行，出現「假死」。

5、圖片插件定時獲取接口更新數據

     ? 
   
         for 
         ( 
         var 
         i = 0; i < 4; i++) { 
        
         setTimeout( 
         function 
         () { 
        
         console.log(i); 
        
         }, 1000); 
        
         }

輸出結果爲，隔1s後一塊兒輸出：4 4 4 4

for循環是一個同步任務，爲何連續輸出四個4？

答：由於有隊列插入的時間，即便執行時間從1000改爲0，仍是輸出四個4。

那麼這個問題是如何產生和解決的呢？請接着閱讀

異步隊列執行的時間

執行到異步任務的時候，會直接放到異步隊列中嗎？

答案是不必定的。

由於瀏覽器有個定時器（timer）模塊，定時器到了執行時間纔會把異步任務放到異步隊列。
for循環體執行的過程當中並無把setTimeout放到異步隊列中，只是交給定時器模塊了。4個循環體執行速度很是快（不到1毫秒）。定時器到了設置的時間纔會把setTimeout語句放到異步隊列中。

即便setTimeout設置的執行時間爲0毫秒，也按4毫秒算。

這就解釋了上題爲何會連續輸出四個4的緣由。

HTML5 標準規定了setTimeout()的第二個參數的最小值，即最短間隔，不得低於4毫秒。若是低於這個值，就會自動增長。在此以前，老版本的瀏覽器都將最短間隔設爲10毫秒。

利用閉包實現 setTimeout 間歇調用

     ? 
   
         for 
         (let i = 0; i < 4; i++) { 
        
         ( 
         function 
         (j) { 
        
         setTimeout( 
         function 
         () { 
        
         console.log(j); 
        
         }, 1000 * i) 
        
         })(i); 
        
         }

執行後，會隔1s輸出一個值，分別是：0 1 2 3

此方法巧妙利用IIFE聲明即執行的函數表達式來解決閉包形成的問題。
將var改成let，使用了ES6語法。

這裏也能夠用setInterval()方法來實現間歇調用。

詳見：setTimeout和setInterval的區別

彈出層插件利用JS中基本類型的參數傳遞是按值傳遞的特徵實現

     ? 
   
         var 
         output =  
         function 
         (i) { 
        
         setTimeout( 
         function 
         () { 
        
         console.log(i); 
        
         }, 1000 * i) 
        
         } 
        
         for 
         (let i = 0; i < 4; i++) { 
        
         output(i); 
        
         }

執行後，會隔1s輸出一個值，分別是：0 1 2 3

實現原理：傳過去的i值被複制了。

基於Promise的解決方案

     ? 
   
         const tasks = []; 
        
         const output = (i) =>  
         new 
         Promise((resolve) => { 
        
         setTimeout(() => { 
        
         console.log(i); 
        
         resolve(); 
        
         }, 1000 * i); 
        
         }); 
        
         //生成所有的異步操做 
        
         for 
         ( 
         var 
         i = 0; i < 5; i++) { 
        
         tasks.push(output(i)); 
        
         } 
        
         //同步操做完成後，輸出最後的i 
        
         Promise.all(tasks).then(() => { 
        
         setTimeout(() => { 
        
         console.log(i); 
        
         }, 1000) 
        
         })

執行後，會隔1s輸出一個值，分別是：0 1 2 3 4 5

優勢：提升了代碼的可讀性。

注意：若是沒有處理Promise的reject，會致使錯誤被丟進黑洞。

使用ES7中的async await特性的解決方案（推薦）

     ? 
   
         const sleep = (timeountMS) =>  
         new 
         Promise((resolve) => { 
        
         setTimeout(resolve, timeountMS); 
        
         }); 
        
         (async () => {  
         //聲明即執行的async 
        
         for 
         ( 
         var 
         i = 0; i < 5; i++) { 
        
         await sleep(1000); 
        
         console.log(i); 
        
         } 
        
         await sleep(1000); 
        
         console.log(i); 
        
         })();