你不知道的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);
 
 }
複製代碼

到此就結束啦~~~