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

Question

I am trying to simulate a dice roll by combining a do while loop and a setInterval function.

the goal is this: user clicks dice roll button. they view a series of numbers and then the roll stops and returns a value.

my idea was to use the 'do while' loop to control how many iterations occur before the dice stops 'rolling'. i've tried a few different things but nothing has worked so far. my latest attempt is below.

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

Forget the do while loop. You just need to keep track of 'state' so you can act accordingly at each interval. The counter will do fine in this simple case.

If using an interval you want to clear the interval when you have finished with it. It would also make sense to 'block' the start button while the dice in rolling.

Here is a modified example of your code which should achieve what you are trying to do:

 var vals = ["\⚀", "\⚁", "\⚂", "\⚃", "\⚄", "\⚅"]; 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 returns immediately, so all your code is doing is kicking off a very large number of iterations (the counter variable will not be incremented before many many versions are executing)

You should just recall the same function with setTimeout from within the function itself.

 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

You don't need the do while . You can just handle the indexing yourself. 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

Two problems in your example,

The first problem is, setInterval will keep execute the given function after certain function, you don't need a do while loop for similar purpose.

The second problem is, instead of using setInterval to keep execute and check whether counter < 10 to clearInterval, you may use setTimeout instead, to create another timeout when counter < 10 and call the diceRoll function itself.

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