JavaScript 中的 Reverse for 循环

Question

通过这段代码，我想创建一个以递减方式工作的循环。我想使用从 10 到 1 的循环for。我这样做了，但我有一个错误。接下来是错误：按下按钮后，最后一个值有延迟。

发生这种情况可能是因为最后的索引更高，并且当应用程序除1000 / 2时，超时更高。我说的对吗？以及如何解决问题？

const btn = document.getElementById('btn');
btn.addEventListener('click', function(){

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

<div class="app">
<button id="btn">click</button>
</div>

Answer 1

如果你想要一个相等的间隔，你的循环就可以了，你只需要修复计算超时的数学

：

const btn = document.getElementById('btn');
btn.addEventListener('click', function(){

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

<div class="app">
<button id="btn">click</button>
</div>

这将每秒从 10 倒计时到 1 一次，如果您希望它更快或更慢，只需根据需要更改 1000。

请注意，循环的顺序在这里实际上并不重要(除了执行时间的几毫秒差异(，因为它是异步的 - 您可以使用非反向循环并且仍然可以获得人眼相同的结果。

Answer 2

如果使用 promise 和 async/await，则可以避免 setTimeout 重载并进行精确控制。 这与约翰·蒙哥马利的答案之间的区别在于，这并不在乎你循环了多少次。 如果需要，请执行 10000，您不会同时运行 10000 个 setTimeout。

const btn = document.getElementById('btn');
const wait = time=>new Promise(resolve=>setTimeout(resolve,time))
btn.addEventListener('click', async function(){      
for (let index = 10; index > 0; index--) {
await wait(1000)
console.log(index)
}
})

<div class="app">
<button id="btn">click</button>
</div>

异步函数允许您使用 await 关键字。 这是javascript中一个简洁的新功能，可以让你编写异步代码(如setTimout(，就好像它是同步的一样。

const wait = time=>new Promise(resolve=>setTimeout(resolve,time))是一个相当常见的辅助函数，开发人员保留了一段时间，您需要等待一段时间，然后做一些事情。 通过awaitwait(1000)函数，我挂起循环的执行，直到时间完成。