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

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

JavaScript

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

在群里看到的，這方面的知識(shí)有點(diǎn)欠缺，希望懂的人可以解答下啊(⊙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貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超4個(gè)贊

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

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

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

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

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

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

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

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

反對(duì) 回復(fù) 2018-09-22