Optimiser ma fonction compte à rebours

Bonjour, j'espère que vous allez bien!

Voilà j'aimerai optimiser ma fonction, en utilisant une boucle ou la recursivité.
quand j'utilise la boucle, elle ne lit pas mon setTimeout...
avec la récursivité j'ai un petit sous cas ma fonction est déclencher au clique d'un button qui à en attribut un onclick et en valeur une fonction sans paramètre.

Voici mon code js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
  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);
}

Merci d'avance

Bonjour,

1-

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function tempsJoueur(i) 
{
  let temps = document.getElementById("time");
  setTimeout(function(){ 
    temps.textContent = temps.value = " "+i.toString().padStart(2, '0')+" ";
    if( i==0 )
    {
      temps.textContent = 'C\'est fini !';
    }
  }, 1000*(30-i));
  i--;
  if(i>0)
  {
    tempsJoueur(i); // récursivité
  }
}
// action
tempsJoueur(30);

2- voir aussi : https://codepen.io/jreaux62/pen/OwgYaz

Merci énormément le code fonction bien!