首頁 > 文章 > web前端 > 實例講解setTimeout看出js函數執行過程

實例講解setTimeout看出js函數執行過程

小云云原創: 2017-12-20 09:27:121933瀏覽

setTimeout 方法用於在指定的毫秒數後呼叫函數或計算表達式。本文主要介紹了從setTimeout看js函數執行過程,需要的朋友可以參考下，希望能幫助到大家。

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

什麼？這不就是我很久之前看到的先打印一個5，再打印一個5，之後每隔一秒就打印一個5，直到打印完6個5的實現方法嗎？那麼問題來了，如果我要依序列印0,1,2,3,4，5的話我該怎麼辦，其實在這之前我就知道有這兩個方法：一個是這樣：

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

還有一個是這樣：

for(var i=0;i<5;i++){
(function(e){
setTimeout(function(){
console.log(e)
},i*1000);
})(i);
};
console.log(i);

不怕笑話，在這之前我沒搞懂這兩個函數真正意義上的作用是用來幹嘛的，只強迫自己這樣記住這樣修改就可以了，但是現在不行啊，我有強迫症啊！於是，我慢慢分析了一下，發現上面那段程式碼可以分離成這樣：

i=0時；滿足條件；

setTimeout(function(){
console.log(i)
},0*1000)；

i =1時；滿足條件；

setTimeout(function(){
console.log(i)
},1*1000)；

i=2時；滿足條件；

setTimeout(function(){
console.log(i)
},2*1000)；

i=3時；滿足條件；

setTimeout(function(){
console.log(i)
},3*1000)；

i=4時；滿足條件；

setTimeout(function(){
console.log(i)
},4*1000);

i=5時，不滿足條件，跳出循環，接著執行for循環後面的console.log(i),打印5；最後依序每秒打印5;

真有意思，為什麼setTimeout裡面的console.log會是後於for循環外面的console.log執行呢？直到我認出了這個單字=>"隊列", 隊列又有宏任務隊列(Macro Task)以及微任務隊列(Micro Task)之分,在javascript中:

macro-task包括：script (整體程式碼), setTimeout , setInterval, setImmediate, I/O, UI rendering。

micro-task包含：process.nextTick, Promises , Object.observe, MutationObserver

上面函數的setTimeout就屬於巨集任務

在js中，事件循環的順序是從script開始第一次循環，隨後全域上下文進入函數呼叫棧，碰到macro-task就將其交給處理它的模組處理完之後將回呼函數放進macro-task的隊列之中，碰到micro -task也是將其回呼函數放進micro-task的佇列之中。直到函式呼叫堆疊清空只剩下全域執行上下文，然後開始執行所有的micro-task。當所有可執行的micro-task執行完畢之後。迴圈再次執行macro-task中的一個任務佇列，執行完之後再執行所有的micro-task，就這樣一直循環。

這就是為什麼setTimeout裡面的console.log會是後於for循環外面的console.log執行，在函數執行上下文中，seiTimeout函數會被放到處理他的macro-task的隊列之中，所以循環的時候setTimeout裡面的function是不會被執行的，而是等到所有整體代碼（非隊列）跑完之後才會執行隊列中的函數；寫到這裡，可能會有點懵逼，其實我也有點懵逼，哈哈哈！！

為了加深理解，還可以試試在裡面加入Promise，於是就有了這個：

(function copy() {
  setTimeout(function() {console.log(4)}, 0);
  new Promise(function executor(resolve) {
    console.log(1);
    for( var i=0 ; i<10000 ; i++ ) {
      i == 9999 && resolve();
    }
    console.log(2);
  }).then(function() {
    console.log(5);
  });
  console.log(3);
})()

解釋一下=>

1.首先，script任務來源先執行，全域上下文入堆疊。

2.script任務來源的程式碼在執行時遇到setTimeout,作為一個macro-task，將其回呼函數放入自己的佇列之中。

3.script任務來源的程式碼在執行時遇到Promise實例。 Promise建構函式中的第一個參數是在目前任務直接執行不會被放入佇列之中，因此此時輸出 1 。

4.在for迴圈裡面遇到resolve函數，函數入棧執行後出棧，此時Promise的狀態變成Fulfilled。程式碼接著執行遇到console.log(2),輸出2。

5.接著執行，程式碼遇到then方法，其回呼函數作為micro-task入棧，進入Promise的任務隊列之中,此時Promise的then 裡面的function回呼函數跟setTimeout裡面的function回呼函數有著異曲同工之意，都會被放到各自的任務隊列中，

　直到函數上下文即script中所有的非隊列代碼執行完畢後再執行,而且微任務隊列優先於宏任務隊列被處理，

總體順序為:上下文非隊列代碼>微任務隊列回呼函數代碼>宏任務隊列回調函數代碼

6.代碼接著執行，此時遇到console. log(3),輸出3。

7.輸出3之後第一個巨集任務script的程式碼執行完畢，這時候開始開始執行所有在佇列之中的micro-task。 then的回呼函數入棧執行完畢之後出棧，這時候輸出5

8.這時候所有的micro-task執行完畢，第一輪迴圈結束。第二輪迴圈從setTimeout的任務佇列開始，setTimeout的回呼函數入棧執行完畢之後出棧，此時輸出4。

最後，為了加深理解，再上一段程式碼：

console.log(&#39;golb1&#39;);
setTimeout(function() {
  console.log(&#39;timeout1&#39;);
  new Promise(function(resolve) {
    console.log(&#39;timeout1_promise&#39;);
    resolve();
　　　　setTimeout(function(){
　　　　　　console.log(&#39;time_timeout&#39;)
　　　　});　　
  }).then(function() {
    console.log(&#39;timeout1_then&#39;)
  })
  setTimeout(function() {
   console.log(&#39;timeout1_timeout1&#39;);
  });
})
new Promise(function(resolve) {
  console.log(&#39;glob1_promise&#39;);
  resolve();
　　setTimeout(function(){
　　　　　console.log(&#39;prp_timeout&#39;)
　　　　});
}).then(function() { console.log(&#39;glob1_then&#39;) })

如果你的执行结果是:golb1=>glob1_promise=>glob1_then=>timeout1=>timeout1_promise=>timeout1_then=>prp_timeout=>time_timeout=>timeout1_timeout1,

可能异步队列算是入门了吧！~~上面的代码看起来有点杂乱，可能用asyns搭配await改造一下会更好，但是这或多或少是鄙人从setTimeout中得到的见解吧

實例講解setTimeout看出js函數執行過程

相關文章