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

How do I create a wait event in dojo that waits for a user to click a button before continuing?

本文关键字：等待 继续 单击 按钮 用户 事件 dojo 创建      更新时间：2023-09-26

我在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确认时，它可以很好地工作。

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

我需要它等待，直到按下是或否按钮，但我不知道如何做到这一点。我试过使用

while(userResponse == null);

但是a)这通常是个糟糕的主意b)不管怎样它都不起作用。

我如何让我的代码等待，直到用户已经点击了两个按钮之一?

如果你可以做一个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();
    }));
}

,然后……只在合适的时候显示这两个按钮(或者它们所在的对话框)。

javascript中没有"wait"或"sleep"函数，javascript代码的每次调用执行到完成(它不会在执行过程中被其他事件的响应中断)。您已经正确识别了克服此全局警报的历史异常，并确认函数在浏览器本机代码中执行并等待用户输入。

因此，你的代码将不得不以某种方式进行重组，例如，"添加到购物车"的事件处理程序验证颜色选择，并调用函数将其添加到购物车(如果有效)。如果无效，则修改DOM以向用户显示一些按钮。"yes"选项的处理程序同样会调用相同的函数来将其添加到购物车中。

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

仅供参考，dojo 1.10工具包文档报告了对dojo Promises的支持，但我留下研究来确定它的适用性。

相关文章：