前端js使用for进行setTimeout延迟操作

最初想着普通for循环根据时间延迟进行调用方法，能达到依次进行，但是结果是执行了同样的参数方法N遍。

let mm =1000;

for (let i in this.man.lamp) {
setTimeout(function() {
this.turnLamp(i,1);
}, mm+100);
}

原因就是因为for循环的阻塞机制。在上面的代码中，setTimeout这个定时器需要等待for循环 执行完成，而for循环执行完成了之后，i已经是最后的值了，此时才开始执行setTimeout，因此会出现同样结果。

 

怎么解决事件阻塞

其实，阻塞作为js引擎的处理方式，我们最好不要想着解决“阻塞”，而是让我们想执行的代码，插入到“主线程”中。

let tim = 2000;
for (let i in this.man.lamp) {
let that = this;
(function(i) {
tim = tim+500;
setTimeout(function() {
that.turnLamp(i,1);
}, tim);
tim = tim+500;
setTimeout(function() {
that.turnLamp(i,0);
}, tim);
})(i)
}

for循环中执行函数将i作为参数传入进去，这样settimeout就会立即执行而不会等待for循环结束