且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

javascript - for循环中setTimeout的问题

更新时间:2022-10-15 09:11:02

首先,执行结果上面的仁兄已经说得很清楚了,第一种方式会在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输出一个数字了。
建议题主去看一下闭包的相关知识,当然,有兴趣的话,也可以去了解一下块级作用域的含义。