Question

我是JavaScript的新手，但我不了解如何处理异步性。我已经阅读和修改了几个小时，但我无法弄清楚。

当我在控制台中独立运行它们时，我有两个函数可以很好地工作...。但是，当我从JS文件中依次运行它们时，第二个函数会在第一个函数输出之前运行。我已经阅读了关于异步/等待javascript的所有内容，而且我想不通要使第一个函数在第二个函数开始运行之前完全运行该怎么做。此外，在线示例对我来说也没有意义。如果您能帮助我，那将很棒。

第一个功能只是掷出六个骰子。第二个功能获取此功能的输出，并在屏幕上绘制卷以供用户查看。

如何使它们同步运行（功能1首先运行，功能2其次运行）？

function diceRoll(purchased) {
    DiceResults = []

    for (var i = 0; i < purchased; i++) {
        DiceResults.push(Math.floor(Math.random() * 6) + 1);
    }
    return DiceResults
}

function DiceRolling(DiceResults) {
    await diceRoll();
    for (var i in DiceResults) {
        Q = (DiceResults[i])
        var x = document.createElement("IMG");
        x.setAttribute("src", Q + ".png");
        x.setAttribute("width", "304");
        x.setAttribute("height", "228");
        document.body.appendChild(x);
    }
}

diceRoll(5)
DiceRolling(DiceResults)

Answer 1

您对异步/等待的目的感到困惑。这用于处理对外部资源的异步请求。在您的示例中，这是不必要的，因为一切都在内部发生。像这样更改示例：

function diceRoll(purchased) {
    DiceResults = []

    for (var i = 0; i < purchased; i++) {
        DiceResults.push(Math.floor(Math.random() * 6) + 1);
    }
    return DiceResults
}

function DiceRolling(DiceResults) {
    for (var i in DiceResults) {
        Q = (DiceResults[i])
        var x = document.createElement("IMG");
        x.setAttribute("src", Q + ".png");
        x.setAttribute("width", "304");
        x.setAttribute("height", "228");
        document.body.appendChild(x);
    }
}

var results = diceRoll(5)
DiceRolling(results)

做您想要做的。第一个函数的结果传递给第二个。

Answer 2

这里没有异步，您不需要使用await。

您需要将调用diceRoll()的结果分配给DiceResults变量。

您还应该在函数内声明局部变量。

function diceRoll(purchased) {
    var DiceResults = []

    for (var i = 0; i < purchased; i++) {
        DiceResults.push(Math.floor(Math.random() * 6) + 1);
    }
    return DiceResults
}

function DiceRolling(DiceResults) {
    for (var i in DiceResults) {
        Q = (DiceResults[i])
        var x = document.createElement("IMG");
        x.setAttribute("src", Q + ".png");
        x.setAttribute("width", "304");
        x.setAttribute("height", "228");
        document.body.appendChild(x);
    }
}

DiceResults = diceRoll(5)
DiceRolling(DiceResults)

具有两个功能的异步/等待JavaScript

2 个答案: