for循环中的setTimeout()

Posted 2022-11-26 spencer66

for(var i = 0;i<3;i++)
    setTimeout(function()
         console.log(i)  
    ,1000)  
;

打印结果：三个3

原因分析：setTimeout()是一个异步处理函数，它会等待所有的主线程任务处理完，才开始执行自己的内部的任务，每隔1s往任务队列中添加一个任务【闭包函数，setTimeout()中的函数，现在还没执行】，当主线程执行完时，这时i=3，

才开始执行任务队列中的任务【闭包函数，setTimeout()中的函数开始执行，执行三次】。

for循环是遵循js执行机制--从上到下，依次同步执行，for循环括号内的就是主线程，执行完时i是3，所以会打印出3次3；

如果想打印出0,1,2

解决方案：

1. 把var改为let，let是块极作用域，每次for循环都会把对应的i绑定到添加的任务【闭包函数，setTimeout()中的函数】中,所以当主线程执行完时，也不会影响到每个任务中i。所以可以打印出0   1   2
2. 把定时器放在一个自执行函数中用i当做参数

   (function(i)
         setTimeout(function()
               console.log(i);
          ,1000)
   )(i)