async / await JavaScript с двумя функциями

Question

Я новичок в JavaScript и не понимаю, как бороться с асинхронностью.Я часами читаю и ковыряюсь, и не могу понять.

У меня есть две функции, которые прекрасно работают, когда я запускаю их независимо в консоли .... Однако, когда я запускаю их последовательно из файла JS, вторая функция запускается до того, как она выведет из первой.Я прочитал все, что я могу, в async / await для javascript, и я не могу понять, что мне нужно сделать, чтобы первая функция полностью запустилась, прежде чем вторая начнет работать.Кроме того, примеры онлайн просто не имеют смысла для меня.Если бы вы могли мне помочь, это было бы здорово.

Первая функция просто бросает шесть кубиков.Вторая функция берет выходные данные этой функции и рисует рулоны на экране, чтобы пользователь мог их видеть.

Как заставить их работать синхронно (сначала функция 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) {
    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.

Youтакже должен объявлять переменные локально внутри функций.

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)