等到 setTimeout 完成后再返回值 Javascript

Question

我正在制作一个简单的骰子游戏，我已经设置了一个函数，可以随机生成数字并非常快速地显示它们，以模拟一种正在滚动的骰子。我遇到的问题是我想等到模拟完成后再 return 值，但值是 return 立即编辑。谁能指出我正确的方向？本质上，我希望 rollDie() 在继续之前等待 diceSimulation() 完成。

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

Answer 1

一个选项是 diceSimulation 到 return Promise 在 50 * 31 毫秒后解析，rollDie 到 await它：

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

请注意，在循环中不要使用 (function (i) {，您可以考虑只使用 let 而不是 var，这样更便于阅读和调试。（使用 var 有太多问题 - 最好尽可能使用 const 或 let。） select result once inside diceSimulation，而不是在循环的每次迭代中，除非你故意插入 HTML 标记，否则最好分配给 testContent 而不是比 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);
}

现场演示：

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>

Answer 2

您可以使用回调或承诺实现您的预期结果。下面的一个简单示例展示了如何使用 promises 作为解决方案：

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)=> {

})

等到 setTimeout 完成后再返回值 Javascript

Wait Until setTimeout is Complete Before Returning Value Javascript

html

javascript

function

delay