技術標籤：原生js已載入就執行函式

詭異的 666

如果有下面這段程式碼，你覺得應該輸出什麼？

let i = 0
for(i = 0; i < 6; i++) {
  setTimeout(() => {
    console.log(i)
  }, 0)
}

感覺上應該輸出 0,1,2,3,4,5

但它實際的輸出卻是 666666！

setTimeout 代表忙完手頭的事之後，馬上執行 xxx，關鍵在於手頭的事，是否改變了 i

因為迴圈先執行完，此時 i = 6，然後再執行 setTimeout，所以就會輸出 666666

有私情的 let 和 for

那如何才能輸出 0,1,2,3,4,5 呢？

JS 給出的答案是把 let 寫在 for 裡面

for(let i = 0; i < 6; i++) {
  setTimeout(() => {
    console.log(i)
  }, 0)
}

因為 JS 在 for 和 let 一起用的時候會新增操作，每次迴圈都會把 i 複製一份，留在這個空間

所以最後輸出的就是留在這個空間的 i，也就是 0,1,2,3,4,5 了

被遺棄的立即執行函式

那還有沒有別的辦法輸出 0,1,2,3,4,5 呢？

讓我們試試 let 出現後，被遺棄的立即執行函式吧

let i = 0
for(i = 0; i < 6; i++) {
  !function(j){setTimeout(() => {
    console.log(j)
  }, 0)}(i)
}
 

每次迴圈定義一個立即執行函式，並將 i 作為引數傳給這個函式，那輸出的值就不會隨著 i 的變化而變化了，因此輸出的結果自然就是 0,1,2,3,4,5 咯