javascript - 在返回值之前等待 setTimeout 完成 Javascript

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

标签： javascripthtmlfunctiondelay

Answer 1

一种选择是diceSimulation返回在msPromise之后解析的 a ，并为它：50 * 31rollDieawait

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有太多问题 - 最好使用constor代替，只要可能。）选择一次insidelet也会更优雅，而不是在循环的每次迭代中，除非你故意插入 HTML 标记，否则最好分配改为：_result diceSimulationtestContentinnerHTML

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>