Question

我正在制作一个简单的骰子游戏，并且我设置了一个函数，该函数将随机生成数字并非常快速地显示它们，以模拟某种掷骰子。我遇到的问题是，我想等到模拟完成后再返回值，但立即返回值。谁能指出我正确的方向？本质上，我希望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返回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。）选择result 一次< / em>放在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

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

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

2 个答案: