Я хотел бы создать цикл для оптимизации моей функции. этот код является обратным отсчетом времени, когда игрок начинает игру. это срабатывает, когда игрок нажимает на StarGame

  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);
setTimeout(function(){ temps.textContent=temps.value=" 21 " }, 6000);
setTimeout(function(){ temps.textContent=temps.value=" 21 " }, 5000);
setTimeout(function(){ temps.textContent=temps.value=" 21 " }, 4000);
setTimeout(function(){ temps.textContent=temps.value=" 21 " }, 3000);
setTimeout(function(){ temps.textContent=temps.value=" 21 " }, 2000);
setTimeout(function(){ temps.textContent=temps.value=" 21 " }, 1000);
}
0
steph_ntic 7 Май 2020 в 13:05

2 ответа

Лучший ответ

Рассмотрим await Обещание, которое разрешается через 1 секунду внутри цикла:

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>
2
CertainPerformance 7 Май 2020 в 10:07

Вы можете использовать setInterval, как показано ниже ,

setInterval многократно вызывает функцию или выполняет фрагмент кода с фиксированной задержкой между каждым вызовом. Он возвращает идентификатор интервала, который однозначно идентифицирует интервал, поэтому вы можете удалить его позже, вызвав 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()" />
0
Karan 7 Май 2020 в 10:15