首頁猿問 for循環(huán)中setTimeout的問題

for循環(huán)中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條經(jīng)驗獲得超4個贊

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

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

這樣寫的作用就是保證每次for循環(huán)中執(zhí)行的setTimeout函數(shù)中的i的值都為當前循環(huán)時i的值，如果我們這樣寫：

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

同樣也可以正常輸出，只是會在1000ms后輸出10個10，因為實際上在setTimeout中的函數(shù)執(zhí)行的時候，for循環(huán)已經(jīng)完成了，i的值已經(jīng)變成了10，當然，我們也可以用es6中的“l(fā)et”來定義一個塊級作用域，就像這樣：

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

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

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

反對回復 2018-09-22