使用循环优化我的 setTimeout 函数

Question

我想创建一个循环来优化我的函数。此代码是玩家开始游戏时的倒计时。当玩家点击该明星游戏时触发它

  function tempsJoueur() {

let temps = document.getElementById("time");

setTimeout(function(){ temps.textContent=temps.value=" 00 " }, 30000);

setTimeout(function(){ temps.textContent=temps.value=" 01 " }, 29000);

setTimeout(function(){ temps.textContent=temps.value=" 02 " }, 28000);

setTimeout(function(){ temps.textContent=temps.value=" 03 " }, 27000);

setTimeout(function(){ temps.textContent=temps.value=" 04 " }, 26000);

setTimeout(function(){ temps.textContent=temps.value=" 05 " }, 25000);

setTimeout(function(){ temps.textContent=temps.value=" 06 " }, 24000);

setTimeout(function(){ temps.textContent=temps.value=" 07 " }, 23000);

setTimeout(function(){ temps.textContent=temps.value=" 08 " }, 22000);

setTimeout(function(){ temps.textContent=temps.value=" 09 " }, 21000);

setTimeout(function(){ temps.textContent=temps.value=" 10 " }, 20000);

`setTimeout(function(){ temps.textContent=temps.value=" 11 " }, 19000);

 setTimeout(function(){ temps.textContent=temps.value=" 12 " }, 18000);`

setTimeout(function(){ temps.textContent=temps.value=" 13 " }, 17000);

setTimeout(function(){ temps.textContent=temps.value=" 15 " }, 16000);

setTimeout(function(){ temps.textContent=temps.value=" 15 " }, 15000);

setTimeout(function(){ temps.textContent=temps.value=" 15 " }, 14000);

setTimeout(function(){ temps.textContent=temps.value=" 15 " }, 13000);

setTimeout(function(){ temps.textContent=temps.value=" 15 " }, 12000);

setTimeout(function(){ temps.textContent=temps.value=" 15 " }, 11000);

setTimeout(function(){ temps.textContent=temps.value=" 15 " }, 10000);

setTimeout(function(){ temps.textContent=temps.value=" 21 " }, 9000);

setTimeout(function(){ temps.textContent=temps.value=" 21 " }, 8000);

setTimeout(function(){ temps.textContent=temps.value=" 21 " }, 7000);

}

Answer 1

考虑一个 Promise，它在循环内 1 秒后解析：awaitasync function tempsJoueur() {&nbsp; const temps = document.getElementById("time");&nbsp; for (let val = 30; val >= 0; val--) {&nbsp; &nbsp; temps.textContent = String(val).padStart(2, '0');&nbsp; &nbsp; await new Promise(res => setTimeout(res, 100)); // changed to 100 for demo&nbsp; }}tempsJoueur();<div id="time"></div>

Answer 2

您可以使用如下所示的 setInterval。setInterval重复调用函数或执行代码片段，每次调用之间有固定的时间延迟。它返回一个唯一标识间隔的间隔 ID，因此您可以稍后通过调用 clearInterval（） 将其删除let interval;let temps = document.getElementById("time");let time = 10;function startTimer() {&nbsp; if (time >= 0) {&nbsp; &nbsp; temps.textContent = temps.value = (" " + time + " ");&nbsp; &nbsp; time--;&nbsp; } else {&nbsp; &nbsp; clearInterval(interval);&nbsp; }}function tempsJoueur() {&nbsp; if (interval) {&nbsp; &nbsp; clearInterval(interval);&nbsp; }&nbsp; time = 10;&nbsp; interval = setInterval(startTimer, 1000)}<div id="time"> </div><input type="button" value = "start timer" onclick="tempsJoueur()" />