显示随机数 25 次，延迟 320 毫秒 Js

Question

我一直在努力寻找答案，但我无法真正让它工作。我需要 JavaScript 代码来显示一个随机数 25 次，每个数字延迟 320 毫秒。(忽略除//开始滚动之外的其他内容(

    function roll() {
var win = Math.floor(Math.random() * 25) + 0
//change the button when rolling
rollButton.disabled = true;
rollButton.innerHTML = "Rolling...";
rollButton.style.backgroundColor = "grey";
rollButton.style.color = "black"
setTimeout(unDisable, 8000)
//start roll
(insert code here)

}

谢谢，如果你能帮忙

Answer 1

您可以使用setInterval进行具有一定延迟的制作循环，并clearInterval用于停止该循环！

$(function(){
t = 0;
var interval = setInterval(function(){
  var win = Math.floor(Math.random() * 25) ;
  var html = $('span').html();
  $('span').html(html + win + '<br>')
  t++;
  if(t == 25)
    stop();
}, 320);
function stop(){
  clearInterval(interval);
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span></span>

Answer 2

您可以做的一件简单的事情很简单：

function roll() {
    //change the button when rolling
    rollButton.disabled = true;
    rollButton.innerHTML = "Rolling...";
    rollButton.style.backgroundColor = "grey";
    rollButton.style.color = "black"
    setTimeout(unDisable, 8000)
    //start roll
    showNum(25)
}
const getRand = _ => Math.floor(Math.random() * 25) + 0
const showNum = n => {
  if (n-- <= 0) {return}
  document.getElementById("dispNum").innerHTML = getRand()
  setTimeout(_ => showNum(n), 320)
}

它将继续生成一个新线程来打印随机数，同时减少其迭代次数，直到达到0