为什么我的 setTimeout 函数没有等待指定的时间？

Question

我有一个 for 循环，我想在延迟后打印它的第 i 个值，但是使用 setTimeout() 函数，它会等待指定的时间，然后 i 的每个值都会立即打印出来。这是因为 setTimeout() 是一个异步函数，当它完成第一次倒计时时，所有其他值的时间也结束了。

for(let i=0;i<10;i++){
   setTimeout(()=>{
     console.log(i);
   },10);
}

输出：（10 毫秒间隔）1-2-3-4-5

需要输出：1 - 10ms 间隙 - 2 -10ms 间隙--...等等。请提供解决原因。

Answer 1

您可以为每个项目修改循环中的计时器。

for(let i=0;i<10;i++){
   setTimeout(()=>{
     console.log(i);
   },10*(i+1));
}

这样可以确保每个项目之间有适当的间隙。

希望对您有所帮助。

Answer 2

你在你的循环中重复调用 setTimeout()，如果你只是想延迟你的循环，你可以尝试这样的事情。

loopWithDelay();

async function loopWithDelay() {
    for(let i = 0; i < 10; i++){
        console.log(i)
        await delay(100);
    }
}

var timer;
function delay(ms) {
    return new Promise((x) => {
        timer = setTimeout(x, ms);
    });
}

Answer 3

是的，setTimeout() 是一个异步函数，所有倒计时几乎都在准确的时间开始，因为连续的 setTimeout() 调用之间没有等待时间。

为了获得预期的行为，您可以将 for 放入函数中，并在倒计时结束时从 setTimeout() 调用该函数：

function f(i) {
    if(i < 10) {
        setTimeout(()=> {
            console.log(i);
            f(i+1);
        }, 10);
     }
}
f(0);

Answer 4

你是正确的 setTimeout 是异步的，因此每个 console.log(i) 基本上同时设置为运行。我发现在您的场景中使用 setInterval 更容易：

let i = 0;
let myInterval = setInterval(() => {
    console.log(i);
    i++;

    if (i === 10) {
        clearInterval(myInterval);
    }
}, 10);

为什么我的 setTimeout 函数没有等待指定的时间？

Why is my setTimeout function not waiting for the time specified?

javascript

asynchronous

settimeout

ecmascript-6