for-setTimeout循環輸出每次遞增

題目

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

方法

// 方法1：使用let形成塊級作用域

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

// 方法2：閉包，借助閉包為每次循環形成一個單獨的作用域以保存變量

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

// 方法3：settimeout 內部閉包，注意：不要將參數傳入 return 的函數中，否則，這樣無法形成閉包

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

// 方法4：bind

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

// 方法5：借助外層函數保存變量

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

總結

由于題目中循環（for(var i...)）無法形成作用域，每次循環產生的 i 的值就無法得以保留。各種方法的本質在于利用 let，閉包等形成作用域以保留 i 的值。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1、范型范型所解決的問題 函數、方法、類型：類，結構體，枚舉，元組類型，協議參數，返回值，成員函數參數，成員屬性類...
    我是小胡胡123閱讀 858評論 0贊 1
  • 特別說明，為便于查閱，文章轉自https://github.com/getify/You-Dont-Know-JS...
    殺破狼real閱讀 493評論 0贊 0
  • 1. Java基礎部分 基礎部分的順序：基本語法，類相關的語法，內部類的語法，繼承相關的語法，異常的語法，線程的語...
    子非魚_t_閱讀 31,766評論 18贊 399
  • 1、隨機數 不需要隨機數種子 arc4random()%N + begin:產生begin～begin+N的隨機數...
    我是小胡胡123閱讀 4,223評論 0贊 2
  • 2016年11月8日豐盛日記 15 1.我擁有接受的心態，為了在后天調休備考注冊消防工程師，因此今天晚上加班到現在...
    堅持玲麗閱讀 157評論 0贊 0