JavaScript 暂停执行函数以等待用户输入

Question

我正在尝试使用 HTML5 Canvas 、JavaScript 和 XML 制作一种游戏。这个想法是您可以通过将问题和答案放入 XML 文件中来进行测验。我写了一个主循环，循环遍历所有问题，提出问题并检查答案的正确性。现在我只是使用警报和对话框来回答问题问题是我的主循环是一个相互关联的大整体，从头到尾遍历整个游戏，而不是一个接一个地让提出问题的警告框和回答对话框，我想要一些用户交互。问题的答案出现在屏幕底部的方框中，用户可以控制起重机来选择正确的答案。这是我坚持的主循环中的代码片段:

answer = loadQuestion(i);
            if (answer == "correct") {
                // answered correctly, update scoreArray and load next question
                scoreArray[currentQuestion] = "correct";
                // show 'next'-button and wait for press to continue

            } else {
                // answered incorrectly again, update scoreArray and load next question
                scoreArray[currentQuestion] = "error";
                // show 'next'-button and wait for press to continue

            }

如您所见，我正在调用 loadQuestion，它会立即加载问题、显示可能的答案，并且现在会立即抛出一个对话框，您可以在其中键入答案。此答案已返回并经过验证。

我已经对起重机的控制进行了编程，用户已经可以用它拿起一个箱子了。但是因为我正在调用 loadQuestion 并期望它返回一个值，所以这是行不通的。如何让我的主循环“暂停”，直到玩家使用起重机给出答案，然后继续？我已经尝试将 answer 设置为全局变量，并且只有一个空的 while answer == "" 让函数忙于不做任何事情，直到 answer 获得一个值，但这只会卡住脚本。我还弄乱了间隔，试图监视答案变量的状态，并在发生这种情况时清除间隔并返回值，但这只是返回 false，因为函数完成后没有立即返回值。

Answer 1

How do I make my main loop "pause" until an answer has been given by the player using the crane, and then proceed?

通过分解。浏览器上 JavaScript 中唯一的“让步”是让您的函数结束，然后安排稍后回调(通过 setTimeout、setInterval、ajax 回调等) .在你的情况下，我倾向于认为给你回电话的触发器应该是用户回答上一个问题的 Action ，例如，在答案框上的 click 处理程序或类似的(而不是 setTimeout 等，它们是自动的)。

例如，这段代码:

function loopArray(ar) {
    var index;
    for (index = 0; index < ar.length; ++index) {
       doSomething(ar[index]);
    }
}

...可以像这样重铸:

function loopArrayAsync(ar, callback) {
    var index;

    index = 0;
    loop();

    function loop() {
        if (index < ar.length) {
            doSomething(ar[index++]);
            setTimeout(loop, 0);
        }
        else {
            callback();
        }
    }
}

第二个版本在每次循环迭代时将控制权交还给浏览器。同样重要的是要注意，第二个版本在循环完成之前返回，而第一个版本等待所有循环完成，这就是为什么第二个版本有callback 循环完成时调用的函数。

调用第一个的代码可能如下所示:

var a = ["one", "two", "three"];
loopArray(a);
// Code that expects the loop to be complete:
doTheNextThing();
doYetAnotherThing();

...而使用异步版本看起来像这样:

var a = ["one", "two", "three"];
loopArrayAsync(a, function() {
    // Code that expects the loop to be complete:
    doTheNextThing();
    doYetAnotherThing();
});

这样做，您可能会发现您使用了 closures (上面的 loop 是一个闭包)，因此这篇文章可能会有用:Closures are not complicated