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

Question

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

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

我的想法是使用 '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)
    });

Answer 1

setInterval returns 立即，所以你所有的代码正在做的是开始大量的迭代（ counter 变量在许多版本执行之前不会递增)

您应该在函数本身中使用 setTimeout 调用相同的函数。

var counter = 0;

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

diceRoll()

Answer 2

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

如果使用间隔，您希望在完成间隔后清除间隔。在骰子滚动时 'block' 开始按钮也很有意义。

这是您的代码的修改示例，它应该可以实现您想要做的事情：

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>

Answer 3

您不需要 do while。您可以自己处理索引。 fiddle

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

$(document).ready(function() {
  var counter = 1;

  var interval = setInterval(function() {
    if (counter < 10) {
      diceRoll()
      counter = counter + 1;
    } else {
      clearInterval(interval);
    }
  }, 500);

});

Answer 4

你的例子中有两个问题，

第一个问题是，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();
    });
}

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

how to combine a do while loop and setInterval timer function

javascript

game-development