為什么我的帶有 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);