已解決430363個問題，去搜搜看，總會有你想問的

for循環中setTimeout的問題

首頁猿問 for循環中setTimeout的問題

for循環中setTimeout的問題

JavaScript

躍然一笑 2018-08-13 11:10:06

在群里看到的，這方面的知識有點欠缺，希望懂的人可以解答下啊(⊙o⊙)…for(var i=0;i<10;i++){ setTimeout((function(i){ return function(){ console.log(i); } })(i),1000);}for(var i=0;i<10;i++){ setTimeout((function(i){ return function(){ console.log(i); } })(i),(function(i){ return i*1000 })(i));}

查看完整描述

1 回答

浮云間

TA貢獻1829條經驗獲得超4個贊

首先，執行結果上面的仁兄已經說得很清楚了，第一種方式會在1000ms后很快打印出0至9，第二種方法會在代碼執行后每相隔1000ms打印0至9的一個數字。
我們來分析代碼：
首先，看這個函數：

(function(i){
   return function(){
       console.log(i);
   }
  })(i)

這樣寫的作用就是保證每次for循環中執行的setTimeout函數中的i的值都為當前循環時i的值，如果我們這樣寫：

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

同樣也可以正常輸出，只是會在1000ms后輸出10個10，因為實際上在setTimeout中的函數執行的時候，for循環已經完成了，i的值已經變成了10，當然，我們也可以用es6中的“let”來定義一個塊級作用域，就像這樣：

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

上面的函數在支持es6語法瀏覽器中同樣會有0到9的輸出。

當你理解了(function(i){...})(i)只是為了在function(i)執行的時候i的值能夠是當前for循環的i值這個點的時候，第二種方式與第一種方式的區別無非就是根據當前for循環的i值給setTimeout函數添加一個不同的延時罷了，自然也就能理解為什么第二種方式會每隔1000ms輸出一個數字了。
建議題主去看一下閉包的相關知識，當然，有興趣的話，也可以去了解一下“塊級作用域”的含義。

反對回復 2018-09-22

1 回答
0 關注
1520 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

for循環中setTimeout的問題

for循環中setTimeout的問題

1 回答

添加回答