为什么我的带有 setTimeout 的倒计时功能不起作用

Question

所以我开发了一个倒计时功能，在下面的代码中我用 1 分钟的输入测试它，但控制台一次抛出所有值。 每秒应该发生一个数字，我相信问题是 setTimeout 可能不起作用，但是如何解决？

 function countdown(tempominutos) {
    let tempo = new Date();
    tempo.setHours(0, tempominutos, 0);
    let tempoformatado = tempo.toLocaleTimeString();
    console.log(tempoformatado);
    while ((tempo.getSeconds() > 0) || (tempo.getMinutes() > 0) || (tempo.getHours() > 0)) {
      tempo.setSeconds(tempo.getSeconds() - 1);
      tempoformatado = tempo.toLocaleTimeString();
      setTimeout(console.log(tempoformatado), 1000);
    }
  }
  countdown(1);

Answer 1

您的代码中有几个问题：

首先， setTimeout的第一个参数是一个函数，您提供的console.log(tempoformatado)将执行console.log并评估为undefined 。

您可以通过用函数包装您的语句来解决这个问题：

setTimeout(function() { console.log(tempoformatado) }, 1000);

其次，您对所有回调使用相同的超时。 你需要记住你的while循环是立即执行的。 所有超时将在完全相同的时间完成，并且在初始tempoformatado日志之后几乎 1000 毫秒。

为了解决这个问题，您需要使间隔取决于您显示的时间。 例如，您可以计算 1000 毫秒乘以秒数：

1000*tempo.getSeconds()

最后，您需要将tempoformatado设置为while块的本地。 这确保每个循环都作为它自己的tempoformatado值。 您可以通过在while循环中使用let关键字重新定义tempoformatado来完成此操作

 function countdown(tempominutos) { let tempo = new Date(); tempo.setHours(0, tempominutos, 0); let tempoformatado = tempo.toLocaleTimeString(); console.log(tempoformatado); while ((tempo.getSeconds() > 0) || (tempo.getMinutes() > 0) || (tempo.getHours() > 0)) { tempo.setSeconds(tempo.getSeconds() - 1); let tempoformatado = tempo.toLocaleTimeString(); setTimeout(function() { console.log(tempoformatado) }, 1000*tempo.getSeconds()); } } countdown(1);

Answer 2

您的代码期望 setTimeout 像睡眠函数一样工作。

相反，将其替换为此处定义的 sleep 函数： https : //stackoverflow.com/a/39914235/6801443

 function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function countdown(tempominutos) { let tempo = new Date(); tempo.setHours(0, tempominutos, 0); let tempoformatado = tempo.toLocaleTimeString(); console.log(tempoformatado); while ((tempo.getSeconds() > 0) || (tempo.getMinutes() > 0) || (tempo.getHours() > 0)) { tempo.setSeconds(tempo.getSeconds() - 1); await sleep(1000); tempoformatado = tempo.toLocaleTimeString(); console.log(tempoformatado); } } countdown(1);