CODEWITHSUNDEEP
javascript
Boguhe Stephane
Boguhe Stephane

Reputation: 11

optimize my setTimeout function with loop

I would like to create a loop to optimize my function. this code is a countdown when a player starts a game. it is triggered when the player clicks that 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);
}

Upvotes: 0

Views: 77

Answers (2)

Karan
Karan

Reputation: 12629

You can use setInterval like below.

setInterval repeatedly calls a function or executes a code snippet, with a fixed time delay between each call. It returns an interval ID which uniquely identifies the interval, so you can remove it later by calling 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()" />

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 370989

Consider awaiting a Promise which resolves after 1 second inside a loop instead:

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>

Upvotes: 2

Related Questions