JavaScript暂停执行函数等待用户输入 [英] JavaScript pausing execution of function to wait for user input

问题描述

我正在尝试使用HTML5画布，JavaScript和XML制作一种游戏。
想法是你可以通过在XML文件中提出问题和答案来进行测验。
我写了一个循环遍历所有问题的主循环，构建它们并检查答案的正确性。
现在我只是使用警报和对话框来回答问题
问题是我的主循环是一个互相连接的整体，从头到尾遍历整个游戏，而不是警报框提出问题和对话框来回答，紧接着，我想要一些用户互动。
问题的答案显示在屏幕底部的框中​​，用户可以控制起重机选择正确的答案。
这是我坚持使用的主循环代码片段：

I'm trying to make a sort of game using the HTML5 canvas, JavaScript and XML. The idea is that you can make a quiz by putting questions and answers in an XML file. I wrote a main loop that loops through all the questions, poses them and checks the correctness of the answer. For now I'm simply using alerts and dialog boxes to answer the questions The problem is that my main loop is one big interconnected whole that walks through the entire game from beginning to end, and instead of having alert boxes posing questions and dialog boxes to answer, immediately after one another, I want some user interaction. The answers to the questions appear on boxes at the bottom of the screen, and the user gets to control a crane to pick the right answer. Here's the snippet of code from the main loop I'm stuck on:

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，它会立即加载问题，显示可能的答案，现在立即抛出一个对话框，您可以在其中键入答案。
这个答案被退回并验证。

As you can see I'm calling loadQuestion, which instantly loads the question, shows the possible answers, and for now immediately throws a dialog box where you can type the answer. This answer is returned and validated.

我已经编程了起重机的控件，用户已经可以拿起一个盒子。
但是因为我正在调用loadQuestion并期望它返回一个值，所以这不起作用。
如果玩家使用起重机给出答案，我该如何让我的主循环暂停，然后继续？
我已经尝试将答案作为一个全局变量，并且只需要一个空的而answer ==以保持函数忙无所事，直到答案获得一个值，但这只是冻结了脚本。
我还试图监视应答变量的状态，并且在发生这种情况时清除间隔并返回值，但是这只是返回false，因为函数完成而没有立即返回值。 / p>

I have already programmed the controls of the crane, the user can already pick up a box with it. But because I'm calling loadQuestion and expecting it to return a value, this doesn't work. How do I make my main loop "pause" until an answer has been given by the player using the crane, and then proceed? I already tried making the answer a global variable, and just having an empty while answer == "" to keep the function busy doing nothing until answer gets a value, but this just freezes the script. I also messed around with intervals in an attempt to monitor the status of the answer variable, and clear the interval and return the value when this happens, but that simply returns false since the function completes without immediately returning a value.

推荐答案

在玩家给出答案之前，如何让我的主循环暂停使用起重机，然后继续？

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回调等）。在你的情况下，我倾向于认为触发回叫的触发器应该是用户回答上一个问题的动作，例如，答案框上的单击处理程序或某些这样（而不是 setTimeout 等等，这是自动的）。

By breaking it up. The only "yield" in JavaScript on browsers is to let your function end and then arrange to get called back later (via setTimeout, setInterval, an ajax callback, etc.). In your case, I'd tend to think the trigger to call you back should be the user's action answering the previous question, e.g., a click handler on the answer boxes or some such (rather than setTimeout and such, which are automated).

例如，这段代码：

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

...可以像这样重铸：

...can be recast like this:

function loopArrayAsync(ar, callback) {
    var index;

    index = 0;
    loop();

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

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

The second version yields control back to the browser on every loop iteration. It's also important to note that the second version returns before the loops have been completed, whereas the first version waits until all loops are done, which is why the second version has the callback function it calls when it's done looping.

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

Code calling the first one might look like this:

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

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

...whereas using the async version looks like this:

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

这样做，你可能会发现你使用 闭包 （ loop ，上面是一个闭包），所以这篇文章可能有用： 闭包并不复杂

Doing this, you'll probably find you use closures (loop, above, is a closure), and so this article may be useful: Closures are not complicated

这篇关于JavaScript暂停执行函数等待用户输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！