Javascript - 简单的倒计时到零动画是即时的

Question

for (let i = 10; i >= 0; i--) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}

我想显示一个从

10

到

0

的简单倒计时，每次减法之间有 1 秒的延迟。我使用上面的示例，它立即显示了所有数字。我该如何解决这个问题？

Answer 1

注意下面的代码如何为每个循环设置不同的超时持续时间。

for (let i = 10; i >= 0; i--) {
    setTimeout(function() {
        console.log(i);
    }, 1000*(10-i)); // '10-i' staggers your timeouts
}

Answer 2

立即记录所有数字的原因是 setTimeout() 函数安排一个函数在给定的延迟后执行，但它不会阻止循环的执行。因此，所有 setTimeout() 函数几乎同时被调度并在延迟 1 秒后执行，有效地记录相同的值 (0) 11 次。