Exécuter setInterval correctement dans une boucle while

Question

J'essaie d'exécuter un processus setInterval dans une boucle while qui génère un nombre de dés aléatoire et définit le graphique de dés pour le refléter. J'ai l'intention d'utiliser setInterval pour ajouter un délai entre chaque itération de boucle while afin que l'interface utilisateur représente les dés "rolling", plutôt que de simplement retourner la valeur finale. En l'état actuel, setInterval ne s'arrête pas quelle que soit la condition placée dans l'instruction if. Idéalement, ce serait «num» lui-même, de sorte que le nombre de jets de dés puisse être défini ailleurs.

//roll dice num times 
function rollDice(num) { 
    var counter = 0; 
    var i = 0; 
    while (i < num){ 
     var diceDOM2 = document.querySelector(".dice"); 

     var diceIntervalID = setInterval(function(){ 

      //1. Rnd number 
      dice2 = Math.floor(Math.random()* 6) + 1; 

      // 2. Update diceDOM with new dice value 
      diceDOM2.style.display = "block"; 
      diceDOM2.src = "dice-" + dice2 + ".png"; 
      console.log(diceDOM2.src); 

      //determine setInterval exit 
      counter++; 
      console.log(counter); 
      if(counter > num){ 
       clearInterval(diceIntervalID); 

      } 
     }, 1500); 
     i++; 
    }; 
}; 

Un grand merci tout

Answer 1

Voici une méthode qui roulera les dés le nombre de fois et attend 500ms avant le prochain rouleau. Je pense que cela devrait vous aider.

function rollDice(numberOfRolls) {  
 
    console.log(`rolling the dice`); 
 
    var diceThrow = Math.floor((Math.random() * 6) + 1); 
 

 
    console.log(`The dice reads ${diceThrow}`); 
 
    // Lower the number of rolls left. 
 
    numberOfRolls--; 
 

 
    // Check if there is a throw left... 
 
    if (numberOfRolls < 1) { 
 
    console.log('The dice have been rolled the requested number of times.'); 
 
    // No more throws left, exit the method without scheduling a new throw. 
 
    return; 
 
    } 
 

 
    // Set a timeout of 500ms after which to throw the dice again. 
 
    console.log('Waiting 500ms till the next throw'); 
 
    setTimeout(() => { 
 
    // Call the rollDice method with the lowered number of throws. 
 
    rollDice(numberOfRolls); 
 
    }, 500); 
 
    
 
} 
 

 
// Roll the dice 3 times 
 
rollDice(3);

Je l'ai fait un peu changé à l'extrait de sorte qu'il ne planifie pas un nouveau jet quand il ne sera plus nécessaire.