前端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循環結束