如何在 dojo 中创建等待用户在继续之前单击按钮的等待事件？答案

【问题标题】：How do I create a wait event in dojo that waits for a user to click a button before continuing?如何在 dojo 中创建等待用户在继续之前单击按钮的等待事件？
【发布时间】：2015-11-18 08:36:24
【问题描述】：

我在 javascript 文件中有以下代码：

if(dojo.byId('WC_selectedColorNumber') == null && this.defaultColor != null)
{   
    dijit.byId('WC_color_selection').domNode.style.display = 'block';
    dojo.html.set(dojo.query(".message__button .add"), "Add product with only base color " + this.defaultColor + "?");

    var userResponse = true;

    dojo.connect(WC_add_color_yes, "onclick", function(evt){
        userResponse = true;
    });

    dojo.connect(WC_add_color_no, "onclick", function(evt){
        userResponse = false;
    });

    //var userResponse = confirm("Add product with only base color " + this.defaultColor + "?");

    //I WANT TO WAIT HERE FOR THE RESPONSE

    if(userResponse == false) //if user clicks Cancel or 'no', display a message and leave the function.
    {
        alert("Remember to select a color before adding to cart."); //should be a tooltip/popup (not javascript alert) with the same message
        return; //return so item doesn't get added to cart
    }
}

首先，这段代码背后的逻辑是正确的，并且在使用javascript确认时运行良好。

到目前为止，一切都出现并正确显示，并且单击按钮执行正确的操作（如果我将 console.log 放入 onclick dojo 事件中，当我单击按钮时它们确实会打印到控制台）。但是，程序不会等待响应，而是在看到用户输入之前继续执行 dojo.connect 方法。

我需要它等到按下是或否按钮，但我不知道该怎么做。我试过使用

while(userResponse == null);

但是a）这通常是一个糟糕的想法，并且b）无论如何它都没有用。

如何让我的代码等到用户单击两个按钮之一？

【问题讨论】：

标签： javascript jquery events button dojo

【解决方案1】：

如果你能制作一个 jsfiddle，我想我可以为你提供更多帮助，但你的 dojo.connect 调用不应该在这样的逻辑流程中。相反，请在小部件 startup 上设置您的连接，并让它们通用。

在您的示例代码中，在我看来，“是”表示“使用默认颜色”，“否”表示“用户必须指定颜色”。所以...

startup: function () {
    this.inherited(arguments);

    dojo.connect(WC_add_color_yes, "onclick", dojo.hitch(this, function(evt){
        this.useDefaultColor();
    }));

    dojo.connect(WC_add_color_no, "onclick", dojo.hitch(this, function(evt){
        this.displayColorPicker();
    }));
}

然后...仅在适用时显示这两个按钮（或希望它们所在的对话框）。

【讨论】：

【解决方案2】：

javascript 中没有“等待”或“睡眠”功能，每次调用 javascript 代码都会执行到完成（在执行过程中不会因对其他事件的响应而中断）。您已经正确识别了克服此问题的历史异常 - 全局警报和确认函数在浏览器本机代码中执行并等待用户输入。

因此，您的代码必须以某种方式重组，例如“添加到购物车”的事件处理程序验证颜色选择并调用函数以将其真正添加到购物车（如果有效）。如果它无效，它会修改 DOM 以向用户展示一些按钮。 “yes”选项的处理程序同样会调用相同的函数来真正将其添加到购物车中。

具体代码不在此答案的范围内——页面和代码设计中必须有很多方法才能达到预期的结果。仅举例：分解顺序代码并将其放入单独的事件处理程序中，使用 EC6 中定义但 MSIE 不支持的 Promise 对象进行编码，或者甚至在颜色选择逻辑中提供“无 - 仅基色”选项。

仅供参考，dojo 1.10 工具包文档报告了对 Dojo Promises 的支持，但我留下研究以确定它是否适合您。

【讨论】：