關於js的setTimeout執行順序

首先定義一個數組 在for循環中使用定時器輸出數組

var messages = ['1', '2', '3', '4']; 
for (var i = 0; i < messages.length; i ++) {
setTimeout(function(){
console.log(messages[i]); }, i*1000); 
}

 

執行輸出的是4個undefined

為什么不是輸出 1  2 3 4 呢 而是輸出underfined,這個問題期初以為是作用域的問題，最后百度了，終於找到其原因。

原因：setTimeout 使函數延遲1s執行，而for循環執行完成還不到0.1秒，到執行函數的時候，其實 i 已經變成4了，而數組下標最大數字是3，沒有對應的數組值，所以為underfined。

解決方法 1

使用let定義變量I，不要使用var。let 語句聲明一個塊級作用域的本地變量，並且可選的將其初始化為一個值。

var messages = ['1', '2', '3', '4']; 
for (let i = 0; i < messages.length; i ++) {
setTimeout(function(){
console.log(messages[i]); }, i*1000); 
}

 

解決方法2 加個閉包

var messages = ['1', '2', '3', '4'];
for (let i = 0; i < messages.length; i ++) {
    (function(i){
     setTimeout(function(){
     console.log(messages[i]);
     }, i*1000);
     })(i);//這個的i一定要加進去，去掉函數的參數i，則函數內部沒有對i保持引用。
     }

 

以上兩種方式都可以正常輸出 1 2 3 4