英文:
Javascript - simple countdown to zero animation is instant
问题
for (let i = 10; i >= 0; i--) {
setTimeout(function() {
console.log(i);
}, (10 - i) * 1000);
}
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
for (let i = 10; i >= 0; i--) {
setTimeout(function() {
console.log(i);
}, 1000);
}
<!-- end snippet -->
I want to show a simple countdown from 10 to 0 with a 1 second delay between each subtraction. I use the above example and it shows all the numbers in an instant. How could I fix this?
答案1
得分: 3
请注意以下代码为每个循环设置了不同的超时持续时间。
for (let i = 10; i >= 0; i--) {
setTimeout(function() {
console.log(i);
}, 1000*(10-i)); // '10-i' staggers your timeouts
}
您的代码将设置11个超时，在1秒后同时触发。
英文:
Note how the code below sets a distinct timeout duration for each loop.
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-js -->
for (let i = 10; i >= 0; i--) {
setTimeout(function() {
console.log(i);
}, 1000*(10-i)); // '10-i' staggers your timeouts
}
<!-- end snippet -->
Your code was setting 11 timeouts to all fire at the same time after 1 second.
答案2
得分: 1
由于setTimeout()函数安排了一个函数在给定的延迟之后执行，但它不会阻止循环的执行，所以所有的setTimeout()函数几乎同时安排，并在1秒的延迟后执行，有效地记录相同的值（0）11次。
英文:
The reason that all the numbers are logged instantly is that the setTimeout() function schedules a function to be executed after a given delay, but it does not block the execution of the loop. As a result, all the setTimeout() functions are scheduled almost at the same time and execute after a delay of 1 second, effectively logging the same value (0) 11 times.
答案3
得分: 0
如其他人所指出，您遇到的问题是所有的超时都同时触发。您可以像Marc建议的那样将它们错开，或者您可以实现一个间隔。以下是使用间隔实现的代码片段，这在这种情况下可能是正确的工具。
// 想要的时钟滴答数
let tickCount = 10;
// 当前的滴答计数
let currentTick = 0;
// 存储间隔ID的变量
let tickInterval;
// 处理时钟滴答的函数
function Tick(){
// 检查是否仍在滴答
if ((tickCount - currentTick) >= 0){
// 记录剩余的滴答数
console.log(tickCount - currentTick);
// 增加当前滴答计数
currentTick++;
} else {
// 清除间隔
window.clearInterval(tickInterval);
}
}
// 启动间隔
tickInterval = window.setInterval(Tick, 1000);
注意：我已经忽略了HTML注释和代码标记，只翻译了JavaScript代码。
英文:
As others have pointed out the issue you are having is all your timeouts are being fired at the same time. You could stagger them like Marc suggested or you could implement an interval. Here is a code snippet of this implemented with an Interval which could be argued would be the correct tool to use in this situation.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
// How many ticks you want
let tickCount = 10;
// What the current tick count is
let currentTick = 0;
// Vairable to store the interval id
let tickInterval;
// Function to handle the tick of the clock
function Tick(){
// Check if we are still ticking
if ((tickCount - currentTick) >= 0){
// Log the current number of ticks left
console.log(tickCount - currentTick);
// Increment the current tick
currentTick++;
} else {
// Clear the interval
window.clearInterval(tickInterval);
}
}
// Start the interval
tickInterval = window.setInterval(Tick, 1000);
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论