你不知道的setTimeout()

本人小白一隻，最近在整理Js的基礎知識，故把setTimeout()整理出來跟大家share,若是有錯誤的地方還希望各位路過的大佬給予指正，不喜勿噴，蟹蟹~~~~經常遇到的面試題哦

開始正題：

例子1：

setTimeout(function(){ console.log(0); }, 1000);

setTimeout(function(){ console.log(1); }, 1000);

setTimeout(function(){ console.log(2); }, 1000);

setTimeout(function(){ console.log(3); }, 1000);

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

輸出結果是：停止1s後立即輸出0 1 2 3 4

分析：程式都是先執行同步>非同步>回撥，程式從上到下依次執行，遇到同步程式碼立即執行，遇到非同步和回撥的函式先放入訊息佇列，同步程式碼執行完之後去訊息佇列先執行非同步程式碼，執行非同步之後最後執行回撥函式，根據進入訊息佇列的先後時間進行執行回撥

所以本程式，setTimeout()函式是回撥函式，依次被放入訊息佇列裡面。

注意：setTimeout的起始計算時間是根據放入訊息佇列的時間開始算，所以5個setTimeout函式幾乎同時放入訊息佇列裡面，當第一個setTimeout函式等待1s後執行，剩下的4個也近乎等待了1s，所以5個函式依次都執行。

例子2：

 for (var i = 0; i < 5; i++) {

    setTimeout(function() {
    
        console.log(i);
        
    }, 1000);
    
 }
 
 console.log(i);
複製程式碼

輸出結果是：5 5 5 5 5 5

立即輸出5 等待1s後立即輸出 5 5 5 5 5

解決辦法：使用閉包

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

 }
 console.log(i);//最先執行
複製程式碼

輸出結果：5 0 1 2 3 4

立即輸出5 等待1s後立即輸出 0 1 2 3 4

若想輸出 0 1 2 3 4 5，則：

 for (var i = 0; i <= 5; i++) {
 
 (function(i) {
 
    setTimeout(function() {
    
        console.log(i);
        
    }, 1000);
    
 })(i);
 
 }
複製程式碼

到此就結束啦~~~

你不知道的setTimeout()

相關文章