使用循环优化我的 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 秒后解析：await

async function tempsJoueur() {

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

  for (let val = 30; val >= 0; val--) {

    temps.textContent = String(val).padStart(2, '0');

    await new Promise(res => setTimeout(res, 100)); // changed to 100 for demo

  }

}

tempsJoueur();

<div id="time"></div>

Answer 2

您可以使用如下所示的 setInterval。

setInterval重复调用函数或执行代码片段，每次调用之间有固定的时间延迟。它返回一个唯一标识间隔的间隔 ID，因此您可以稍后通过调用 clearInterval（） 将其删除

let interval;

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

let time = 10;

function startTimer() {

  if (time >= 0) {

    temps.textContent = temps.value = (" " + time + " ");

    time--;

  } else {

    clearInterval(interval);

  }

}

function tempsJoueur() {

  if (interval) {

    clearInterval(interval);

  }

  time = 10;

  interval = setInterval(startTimer, 1000)

}

<div id="time"> </div>

<input type="button" value = "start timer" onclick="tempsJoueur()" />