如何结合do while 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) 
    }); 

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>

Answer 2

setInterval回报，因此所有的代码做的是拉开了一个非常大的迭代次数（在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 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循环用于类似的目的。

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

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(); 
    }); 
}