Wait Until setTimeout is Complete Before Returning Value Javascript

Question

I'm making a simple dice game, and I have set up a function that will randomly generate numbers and display them very quickly to simulate a sort of die being rolled. The problem I'm having is that I want to wait until the simulation is complete before I return the value, but instead the value is returned right away. Can anyone point me in the right direction? Essentially I want rollDie() to wait for diceSimulation() to be complete before continuing.

function rollDie(){

     diceSimulation();
     var result = Math.floor(Math.random() * 6) + 1;
     document.getElementById("result").innerHTML = result;
     return result;

}

function diceSimulation(){
     for (var i = 0; i < 30; i++) {
         var random; 
         (function (i) {
             setTimeout(function () {
                 random = Math.floor(Math.random() * 6) + 1;
                 document.getElementById("result").innerHTML = random;
             }, 50*i);
         })(i);
     }
}

CertainPerformance · Accepted Answer · 2018-11-28 06:07:45Z

4

One option would be for diceSimulation to return a Promise that resolves after 50 * 31 ms, and for rollDie to await it:

async function rollDie(){

  await diceSimulation();
  var result = Math.floor(Math.random() * 6) + 1;
  document.getElementById("result").innerHTML = result;
  return result;

}

function diceSimulation(){
  return new Promise((resolve) => {
    for (var i = 0; i < 30; i++) {
      (function (i) {
        setTimeout(function () {
          const random = Math.floor(Math.random() * 6) + 1;
          document.getElementById("result").innerHTML = random;
        }, 50*i);
      })(i);
    }
    setTimeout(resolve, 1530);
  });
}

Note that rather than (function (i) { inside the loop, you might consider just using let instead of var, it's far nicer to read and debug. (Using var has too many problems - best to use const or let instead, whenever possible.) It would also be more elegant to select result once inside diceSimulation, rather than on every iteration of the loop, and unless you're deliberately inserting HTML markup, better to assign to testContent rather than innerHTML:

const result = document.getElementById("result");
for (let i = 0; i < 30; i++) {
  setTimeout(() => {
    const random = Math.floor(Math.random() * 6) + 1;
    result.textContent = random;
  }, 50*i);
}

Live demo:

async function rollDie() {

  await diceSimulation();
  var result = Math.floor(Math.random() * 6) + 1;
  document.getElementById("result").innerHTML = result;
  return result;

}

function diceSimulation() {
  return new Promise((resolve) => {
    const result = document.getElementById("result");
    for (let i = 0; i < 30; i++) {
      setTimeout(() => {
        const random = Math.floor(Math.random() * 6) + 1;
        result.textContent = random;
      }, 50 * i);
    }
    setTimeout(resolve, 1530);
  });
}

rollDie();

<div id="result"></div>

edited Nov 28, 2018 at 6:07

answered Nov 28, 2018 at 5:32

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

ckorvee Over a year ago

When I run this, the simulation still runs after I have displayed the result from rollDie(). It's almost like it waits till right after the result has been displayed to do the simulation

CertainPerformance Over a year ago

If you change the i < 30 number, or the }, 50 * i number, you'll have to change the 1530 number appropriately - otherwise, resolve should be called after all timeouts in the for loop have finished. Actually, since the final action is the same as the loop action, why not leave out the final action entirely, and iterate from 0 to 30 instead of from 0 to 29?

ckorvee Over a year ago

I didn't change anything, just pasted it in and it was doing that. I see the result displayed and then I see the simulation. It looks like rollDie() is actually returning [object Promise] instead of a number as well.

CertainPerformance Over a year ago

In order to consume Promises you have to call .then on them (or await them, as in the answer). See edit, seems to work just fine to me

ckorvee Over a year ago

Hmmm I'm still having the problem. Does it matter that I'm calling rollDie() from another function? Do I have to do another await?

|

Terrorbladezz · Accepted Answer · 2018-11-28 06:30:04Z

1

You can achieve your expected result using a callback or a promise . A simple example below shows how you can use promises as a solution :

let diceSimulation = () => {
console.log("Dice simulation complete");
};
let rollDie = new Promise((resolve,reject)=> {
resolve("Roll die is completed");
})

rollDie.then((message)=> {
    console.log(message);

    diceSimulation();
},
(fail)=> {

})

answered Nov 28, 2018 at 6:30

Terrorbladezz

911 silver badge5 bronze badges

Collectives™ on Stack Overflow

Wait Until setTimeout is Complete Before Returning Value Javascript

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related