时间戳

首页 > 解决方案 > 具有两个功能的 async/await JavaScript

javascript - 具有两个功能的 async/await JavaScript

问题描述

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

当我在控制台中独立运行它们时，我有两个函数可以很好地工作......但是，当我从 JS 文件中按顺序运行它们时，第二个函数在第一个函数输出之前运行。我已经阅读了关于 async/await for 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)

标签： javascriptasynchronousasync-await

解决方案

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

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)

做你所追求的。第一个函数的结果被传递给第二个。

推荐阅读