Question

单击按钮时，我试图让数字1-6在屏幕上快速闪烁，然后停止并显示随机生成的数字。如果我将clearInterval放入函数中，它只显示随机数，并且不会显示闪烁的数字。

HTML

<div id='dice'>
    <div id='number'>0</div>
</div>
<div id='button'>
    <button onclick='roll()'>Roll Dice</button>
</div>

JAVASCRIPT

let rollButton = document.querySelector('button');
let diceNumber = document.getElementById ('number');

function roll(){
  diceSides = [1,2,3,4,5,6];
  var i = 0;
  let shuffleDice = setTimeout(function(){
    diceNumber.innerHTML = diceSides[i++];
    if(diceNumber == diceSides.length){
      i = 0;
    }
  }, 500);

  let random = Math.floor(Math.random() * 6);
    diceNumber.innerHTML = random;
}

Answer 1

也许这适合你提示：您可以使用i作为计数器变量或使用您的方法（使用数字定义数组并使用索引查找它们并将它们放在number标记中）

<强> HTML ：

<div id='dice'>
    <div id='number'>0</div>
</div>
<div id='button'>
    <button onclick='roll()'>Roll Dice</button>
</div>

<强> JS ：

let rollButton = document.querySelector('button');
let diceNumber = document.getElementById ('number');

function roll(){
    diceSides = [1,2,3,4,5,6];
    var i = 6;
    let shuffleDice = setInterval(function(){
        diceNumber.innerHTML = i;
        if(i == 0){
            clearInterval(shuffleDice);
            let random = Math.floor(Math.random() * 6);
            diceNumber.innerHTML = random;
        }
        i--;
    }, 1000);
}

CodePen

clearInterval
setInterval
setTimeout

Answer 2

SetTimeout只执行一次。您的变量也会按间隔更改！结束后，您必须使用clearInterval清除间隔。

＆＃13;

let rollButton = document.querySelector('button');

let diceNumber = document.getElementById ('number');

function roll(){
  diceSides = [1,2,3,4,5,6];
  var i = 0;
  var shuffleDice = setInterval(function(){
    diceNumber.innerHTML = diceSides[i++];
    //use i
    if(i == diceSides.length){
      i = 0;
      //clear
      clearInterval(shuffleDice);
      
      // moved because the interval will change it
      let random = Math.floor(Math.random() * 6);
      diceNumber.innerHTML = String(random);
    }
  }, 500);

}

＆＃13;

<div id = 'dice'>
      <div id = 'number'>0</div>
    </div>
    <div id = 'button'>
      <button onclick =  'roll()'>Roll Dice</button>
      </div>

＆＃13;

Answer 3

我建议这样的事情：

var diceNumber = document.getElementById ('number');
const diceSides = [1,2,3,4,5,6];

function roll(){
    let arr = [...diceSides,diceSides[Math.floor(Math.random() * diceSides.length)]];
    cycle(diceNumber,arr,200);
}

function cycle(element,arr,delay) {
  element.innerText=arr.shift();
  if (arr.length > 0)
    setTimeout(cycle,delay,element,arr,delay);
}

鉴于你确切地知道要迭代的列表，以及你想要执行的固定迭代次数，这看起来比setInterval更清晰，更简洁，你必须明确停止到达列表的末尾。我喜欢setInterval，因为它会运行一段不确定的时间（例如，直到用户操作停止）。

这说的是：＆＃34;取这个数字列表（最后一个是随机数字）。显示第一个并从列表中删除它。然后等一会再做，直到你没有数字。＆＃34;

这里还有其他几点：

innerText而不是innerHTML，因为您只是设置字符串内容。
你想用你的随机数作为你的骰子阵列的关键，而不是直接 - 直接使用，得到[0-5]，而不是[1-6]。
使用阵列的长度，而不是硬编码＆＃39; 6＆＃39; - 尽可能避免使用魔法数字。通过将所有内容引回到常量数组，更改骰子面上的值（或它们的数量）变得微不足道;只需更改阵列，其他一切仍然有效。

通常，递归代码存在堆栈大小问题。在这种情况下，由于阵列的小尺寸，这不会成为问题。但除此之外，递归通过setTimeout这一事实意味着每个递归都是队列中的一个单独的条目，并且在它退出之前，先前并不等待下一个完成。

Javascript：一次点击setInterval和ClearInterval？

3 个答案: