需要帮助使用 javascript 修复倒计时时钟

Question

我正在尝试创建一个倒计时时钟并且遇到了一些障碍。它正在显示最终数字，即我不想要的 for 循环的最终结果。我的目标是每次循环时都必须循环触发我的 .setTimeout 。我将不胜感激。

const countdownClock = (ranNum) => {
    const startingNum = ranNum * 50;
    for(let i = startingNum; i > 0; i--) {
        setTimeout(() => countdownSpan.textContent = [i], 1000);
    }
}

Answer 1

这是因为 setTimeout 正在等待 1s 执行，直到那时循环在您的第一个 setTimeout 触发之前完成，并且当您的第一个超时被触发时，i 的值被更新并且是现在是循环的最后一个数字。您可以使用promises 和async/await 处理它。

const countdownClock = async (ranNum) => {
    const startingNum = ranNum * 50;
    for(let i = startingNum; i > 0; i--) {
        await new Promise(resolve => {
         setTimeout(() => {
            countdownSpan.textContent = [i];
            resolve()
         }, 1000)
       });
    }
}

希望对你有帮助！

Answer 2

在当前函数完成之前，定时器函数不会触发。这就是为什么您的 for 循环在计时器函数运行之前运行完成的原因。为了看到计时器滴答作响，您根本不应该使用循环，因为计时器将创建循环功能。您只需要递归的 setInterval() 或 setTimeout()。

const element = document.getElementById("countdown");

let startingNum = parseInt(Math.random() * 50, 10);
let timer = null;

function counter(){
  // Clear any running timer to prevent multiple
  // timers from stacking up in the event queue
  clearTimeout(timer); 
  
  startingNum--; // Decrease the counter
  
  // If the count is greater than 0
  if(startingNum >-1){
    element.textContent = startingNum;

    // Set a new timer up to call this function
    timer = setTimeout(counter, 1000); 
  }   
}

// Start the process off
timer = setTimeout(counter, 1000);

<div id="countdown"></div>