如何结合 do while 循环和 setInterval 计时器功能

Question

我试图通过组合 do while 循环和 setInterval 函数来模拟掷骰子。

目标是：用户点击掷骰子按钮。他们查看一系列数字，然后滚动停止并返回一个值。

我的想法是使用“do while”循环来控制在骰子停止“滚动”之前发生的迭代次数。我尝试了一些不同的东西，但到目前为止没有任何效果。我最近的尝试如下。

 function diceRoll(){
    theNum = Math.floor(Math.random() * 6) + 1;
    counter = counter + 1;
    console.log(theNum);
    console.log(counter);
}

$(document).ready(function(){
    counter = 1;
    myVar = '';
    $('#start').click(function(){
        do {
        //
        myVar = setInterval(function(){ diceRoll() }, 500);
        } while (counter < 10)
    });

原文由 TopTomato 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

忘记 do while 循环。你只需要跟踪“状态”，这样你就可以在每个时间间隔采取相应的行动。 counter 在这种简单的情况下会很好。

如果使用间隔，您希望在完成间隔后清除间隔。在骰子滚动时“阻止”开始按钮也是有意义的。

这是您的代码的修改示例，它应该实现您正在尝试做的事情：

 var vals = ["\u2680", "\u2681", "\u2682", "\u2683", "\u2684", "\u2685"];

function setValue(num) {
  $("div").text(vals[num - 1]);
}

var intervalId;
var counter = 1;

function diceRoll() {
  theNum = Math.floor(Math.random() * 6) + 1;
  counter = counter + 1;
  setValue(theNum);
}

$(document).ready(function() {

  $('#start').click(function() {
    if (intervalId)
      return; // Don't allow click if already running.

    intervalId = setInterval(function() {
      if (counter < 10)
        diceRoll();
      else {
        // Reset state ready for next time.
        clearInterval(intervalId);
        intervalId = null;
        counter = 1;
      }
    }, 500);
  });
});

 div {
  font-size: 100px;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="start">Click to Roll</a>

<div>

</div>

原文由 musefan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你的例子中有两个问题，

第一个问题是，setInterval 将在某个函数之后继续执行给定的函数，您不需要出于类似目的的 do while 循环。

第二个问题是，不是使用 setInterval 保持执行并检查 counter < 10 是否到 clearInterval，您可以使用 setTimeout，当 counter < 10 时创建另一个超时并调用 diceRoll 函数本身。

 var counter,
    timeout;

function diceRoll(){
    theNum = Math.floor(Math.random() * 6) + 1;
    counter = counter + 1;
    console.log(theNum);
    console.log(counter);
    if (counter < 10) {
        timeout = setTimeout(diceRoll, 500);
    }
}

$(document).ready(function(){
    $('#start').click(function(){
        if (timeout) {
            clearTimeout(timeout);
            timeout = null;
        }
        counter = 0;
        diceRoll();
    });
}

原文由 David 发布，翻译遵循 CC BY-SA 3.0 许可协议