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

Answer 1

一个选项是diceSimulation返回一个在50 * 31ms后解析的Promise，而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。(在diceSimulation中选择一次result也会更优雅，而不是在循环的每次迭代中，除非您有意插入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)=> {
})