Executing setInterval correctly within a while loop

Question

I am trying to run a setInterval process within a while loop that generates a random dice number and sets the dice graphic to reflect this. I'm intending to use the setInterval to add a delay between each while loop iteration so that the UI represents the dice "rolling", rather than just returning the final value.

As it currently stands, the setInterval does not stop regardless of the condition placed within the if statement. Ideally, this would be 'num' itself, so that the number of dice rolls can be defined elsewhere.

//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++;
    };
};

Many thanks all

Answer 1

Here is a method that will roll the dice the specified number of times and waits 500ms before the next roll. I think this should help you along.

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);

I've made some changed to the snippet so it doesn't schedule a new throw when it is no longer needed.