Javascript 在while循环中正确执行setInterval

我试图在while循环中运行一个setInterval进程，该进程生成一个随机骰子数，并设置骰子图形以反映这一点。我打算使用setInterval在每次while循环迭代之间添加一个延迟，以便UI表示骰子“滚动”，而不仅仅是返回最终值

目前，无论if语句中的条件如何，setInterval都不会停止。理想情况下，这将是“num”本身，因此骰子滚动的数量可以在其他地方定义

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

//掷骰子num次
函数rollDice（num）{
var计数器=0；
var i=0；
while（i数值）{
clearInterval（有效期）；
}
}, 1500);
i++；
};
};

---

非常感谢大家

这里有一种方法，它将掷骰子指定次数，并在下一次掷骰子前等待500毫秒。我想这应该对你有帮助

函数rollDice（numberOfRolls）{
log（`rollingthedice`）；
var diceThrow=Math.floor（（Math.random（）*6）+1）；
log（`The dice reads${diceThrow}`）；
//降低剩余的卷数。
卷数--；
//检查是否还有一次投掷。。。
如果（卷数<1）{
log（'掷骰子的次数已达到要求的次数'）；
//如果没有剩余的抛出，请退出该方法，而不安排新的抛出。
返回；
}
//设置500毫秒的超时时间，然后再次掷骰子。
log（“等待500毫秒直到下一次抛出”）；
设置超时（（）=>{
//使用较低的抛出次数调用rollDice方法。
掷骰子（卷数）；
}, 500);
}
//掷骰子3次
掷骰子（3）这里有一种方法，它将掷骰子指定次数，并在下一次掷骰子前等待500毫秒。我想这应该对你有帮助


函数rollDice（numberOfRolls）{
log（`rollingthedice`）；
var diceThrow=Math.floor（（Math.random（）*6）+1）；
log（`The dice reads${diceThrow}`）；
//降低剩余的卷数。
卷数--；
//检查是否还有一次投掷。。。
如果（卷数<1）{
log（'掷骰子的次数已达到要求的次数'）；
//如果没有剩余的抛出，请退出该方法，而不安排新的抛出。
返回；
}
//设置500毫秒的超时时间，然后再次掷骰子。
log（“等待500毫秒直到下一次抛出”）；
设置超时（（）=>{
//使用较低的抛出次数调用rollDice方法。
掷骰子（卷数）；
}, 500);
}
//掷骰子3次
掷骰子（3）
setInterval
和任何类型的循环通常都是一个非常糟糕的主意。你到底想完成什么？那么，你想让骰子持续滚动n次，每次滚动间隔为1.5秒？@rossipedia，正如曼努埃尔·奥托（Manuel Otto）在下面假设的那样。在这篇文章中，我忘了将间隔延迟从1500ms降低到1500ms——我只是把它设置得这么高，这样我才能更清楚地观察控制台日志记录。
setInterval
和任何类型的循环通常都是一个非常糟糕的主意。你到底想完成什么？那么，你想让骰子持续滚动n次，每次滚动间隔为1.5秒？@rossipedia，正如曼努埃尔·奥托（Manuel Otto）在下面假设的那样。我忘了在这篇文章中将间隔延迟从1500ms降到1500ms，我只是把它设置得这么高，这样我就可以更清楚地看到控制台的日志记录了。太好了，谢谢！就像上面提到的@rossipedia一样，在循环中远离setInterval似乎是更好的选择！如果我对该解决方案的实施有进一步的疑问，我会在哪里发布？在这里？我不确定这样做的方法是什么。或者你可以创建一个新问题并将链接放在这里。我可以的时候会看一看。你能解决你的问题吗。如果你对这个答案感到满意，你能把它标记为例外答案吗？太好了，谢谢！就像上面提到的@rossipedia一样，在循环中远离setInterval似乎是更好的选择！如果我对该解决方案的实施有进一步的疑问，我会在哪里发布？在这里？我不确定这样做的方法是什么。或者你可以创建一个新问题并将链接放在这里。我可以的时候会看一看。你能解决你的问题吗。如果你对这个答案感到满意，你能把它标记为例外答案吗？