关于for循环与setTimeout的延迟

时间:2024-05-31 10:03:50

在for循环中使用setTimeout时,想使其每个setTimeout在上一个setTimeout的基础上进行延时,使用传入数组方式设置时间时,发现实际是按照每次设置的setTimeout的延时执行的,而不是相加,例:

let time = [4, 3, 5, 1, 2];

for(let i = 0; i < time.length; i++){
    // 当i=1时,想其延时7s打印一个3
    setTimeout(function(){
        console.log(time[i]);
    }, time[i]*1000);
}

而其结果却是1,2,3,4,5

通过查阅别人的博客,发现使用for循环进行多次setTimeout时,

假设for循环耗时为0s,其5次setTimeout为同时设置,则该for循环的结果就是按延时从小到大输出数组的元素。

若想进行延时的累加,则可以如此:

let time = [4, 3, 5, 1, 2];
let timeUp = 0;
for(let i = 0; i < time.length; i++){
    // 当i=1时,想其延时7s打印一个3
    timeUp+=time[i];
    setTimeout(function(){
        console.log(time[i]);
    }, timeUp*1000);
}