问题

Question

我有一个游戏，在某些时候我需要提示用户。

对于一个问题，这很简单。我在其他所有地方放置了一个叠加层，并且有一个是和否按钮。我会根据问题更改按钮的操作，但在某些情况下，我需要提出2或3个问题。通过使用confirm()我可以将它放在for循环中，但此刻它只会改变问题和答案。

我正在考虑设置一个变量，如numberOfQs = 3然后currentQ = 1，在点击是/否按钮后，我会增加并调用question函数，直到currentQ === numberOfQs < / p>

这是最好/唯一的选择吗？我不想使用confirm()或prompt()，因为我无法使用它。

请不要让JS库回答。

Answer 1

问题

如何在输入之前暂停JavaScript，例如确认/提示框？

简单的答案是：你不能（如果需要造型）。

JS是异步和单线程的，因此没有办法阻止运行代码，因为所有“输入”（DOM按钮，输入字段等）本质上是异步的（即通过使用事件队列）。执行繁忙循环（for / while）进行轮询只会阻塞线程，因此您无法检查事件并使用例如setTimeout进行轮询会使其再次异步。

您可以使用prompt()（不是样式但可以按照您的意图阻止浏览器）或使用覆盖，就像您设计的那样处理事件。标志在此处用于在等待条件满足时阻止UX（重影/禁用）。这完全是关于程序设计。

如果您已有叠加层，只需将问题文字替换为下一个，直到不再有，然后移除叠加层。您可以将其嵌入到为您处理按钮和文本的对象中。

解决方案

创建自包含的对象可以让它在公园里散步。

让我们创建两个对象：

民意调查大师
问题对象。

Poll对象将设置叠加层，并在完成后将其删除，并调用我们的回调。

问题对象将设置问题文本，按钮并处理按钮单击并回答。

Online demo here

Poll对象如下所示：

function Poll(callback) {

    var overlay = document.createElement('div'), /// overlay DIV

        current,      /// question counter
        me = this;    /// self-reference

    /// question array
    this.questions = [];

    /// setup overlay div with classname
    overlay.className = 'overlay';

    /// method to add questions
    this.add = function(q) {
        me.questions.push(q);
    }

    /// start the poll
    this.start = function() {

        if (me.questions.length === 0) return;

        /// inject the overlay to DOM            
        document.body.appendChild(overlay);

        /// start the displaying of questions
        current = 0;
        next();
    }

    /// called from question itself as well as a callback
    function next() {
        if (current < me.questions.length) {

            /// provide overlay (parent) and callback
            me.questions[current].show(overlay, next);
            current++;

        } else {
            /// when done, remove overlay and callback
            document.body.removeChild(overlay);
            callback();
        }
    }
}

不那么复杂：它保留了添加问题对象的机制，启动民意调查并转到下一个问题。

Question对象如下所示：

function Question(txt) {

    /// create the various elements we need
    var box = document.createElement('div'),
        btnYes = document.createElement('button'),
        btnNo = document.createElement('button'),
        me = this;

    /// setup question box with text and class name
    box.className = 'question';
    box.innerHTML = txt;

    /// setup buttons with text, classes and event handlers
    btnYes.className = 'buttonYes';
    btnNo.className = 'buttonNo';
    btnYes.innerHTML = 'YES';
    btnNo.innerHTML = 'NO';

    /// add the buttons to question box
    box.appendChild(btnYes);
    box.appendChild(btnNo);

    btnYes.onclick = handleYes;
    btnNo.onclick = handleNo;

    /// expose question and answer
    this.question = txt;
    this.answer = null;

    /// called from Poll object to show question
    this.show = function(parent, callback) {
        me.parent = parent;
        me.callback = callback;

        /// add question box to overlay
        parent.appendChild(box);
    }

    /// if we clicked "yes", set answer and remove box
    function handleYes() {
        me.answer = true;
        done();
    }

    /// if we clicked "no", set answer and remove box
    function handleNo() {
        me.answer = false;
        done();
    }

    function done() {
        /// remove box and call "next()" in Poll object
        me.parent.removeChild(box);
        me.callback(me.answer);
    }
}

用法

现在，当这些对象到位时，我们只需设置一个这样的民意调查：

var poll = new Poll(done);

poll.add(new Question('This will work fine?'));
poll.add(new Question('This is second question?'));
poll.add(new Question('This is third question?'));

poll.start();

就是这样。我们现在需要做的就是为我们添加的类定义CSS规则。

我们也可以迭代问题对象，看看我们回答了什么：

function done() {
    for(var i = 0, q; q = poll.questions[i]; i++)
        console.log(q.question, q.answer);
}

希望这有帮助。

Answer 2

window.prompt（ “SomeText” 则会， “defaultText”）;

来自：http://www.w3schools.com/js/js_popup.asp

如何在输入之前暂停JavaScript，如确认/警告框？

2 个答案:

问题

解决方案

Online demo here

用法