如何让代码等待确定/取消按钮选择？

Question

我正在使用 JQuery 的 $.dialog()，我在其中打开带有“确定”和“取消”按钮的对话框。

我预计当对话框打开时，代码会停止，并在用户选择“确定”或“取消”时首先继续。

这是我的完整源代码 http://pastebin.com/uw7bvtn7

我遇到问题的部分位于第 127-151 行。

$("#dialog:ui-dialog").dialog("destroy");

$("#dialog-confirm").dialog({
    resizable: false,
    height: 600,
    modal: true,
    open: function() {
    $(this).children('div.dialog-text').replaceWith("<h3><b>Users</b></h3>" + makeDialogTable(users) + "<h3><b>Owners</b></h3>" + makeDialogTable(owners));
    },
    
    buttons: {
    "Okay": function() {
        $(this).dialog("close");
    },
    
    Cancel: function() {
        is_okay = 0;
        $(this).dialog("close");
    }
    } // buttons
    
}); // dialog


alert(is_okay);

代码现在所做的就是首先显示对话框，然后在顶部显示 alert(is_okay)。

我想要的是，当用户按下“确定”或“取消”时，代码首先继续。

怎么可能呢？

Answer 1

代码确实按顺序执行。 $("#dialog-confirm").dialog()的作用是弹出一个对话框。 alert(is_okay) 在上面的行执行完毕之前不会执行。但Okay 和Cancel 是事件侦听器。

"Okay": function() {
    $(this).dialog("close");
}

上面的代码将事件侦听器分配给事件。这就是它所做的一切，它不执行这些函数，它只是将这些函数分配给事件调用。

我建议阅读一些有关事件和事件侦听器的内容。如果您打算认真使用 JQuery，它将为您省去很多困惑。

Answer 2

$("#dialog-confirm").dialog({  ... 
close :(event, ui) { alert(is_okay);}
})

或者您可以稍后绑定函数：

$( "#dialog-confirm" ).bind( "dialogclose", function(event, ui) {
   alert(is_okay);
});

代码不会像 alert 那样停止并继续，但仅在对话框关闭时才会显示消息。

Answer 3

只需将打开对话框后的所有代码放入一个函数中，然后从对话框回调函数中调用该函数即可确定/取消。

function doTheRest(args) {
    alert(args);
}

// snippet from dialog options
"Okay": function() {
    $(this).dialog("close");
    doTheRest(1);
},

"Cancel": function() {
    $(this).dialog("close");
    doTheRest(0);
}

Answer 4

浏览器使用基于事件的异步编程模型，其中许多事情可以（并且确实）同时发生。这就是样式转换（动画如滚动或淡入淡出）的工作原理。

您的示例显示一个对话框，然后引发警报。它不能“等待”用户单击按钮，因为这样做会阻止浏览器执行其他任何操作。

因此，您需要重构代码，以便在单击与操作关联的回调中的“确定”或“取消”按钮时执行您需要执行的操作。

换句话说，您需要：

buttons: {
  "Okay": function() { // this function is called when a user clicks the Okay button
    // do whatever work is required here
  }
}

Answer 5

JavaScript 中没有直接的方法来“等待”某些事情——异步事件通常通过回调来处理。这意味着您需要根据事件而不是顺序代码来考虑您的程序。而不是您当前的代码：

$("#dialog-confirm").dialog({
  ...
});

alert(is_okay);
// rest of code

您需要将“其余代码”部分包装到其自己的函数中，然后从对话框的“确定/取消”回调中调用该函数：

$("#dialog-confirm").dialog({
    ...

    buttons: {
    "Okay": function() {
        $(this).dialog("close");
        what_happens_if_okay();
    },

    Cancel: function() {
        $(this).dialog("close");
        what_happens_if_not_okay();
    }
    } // buttons

}); // dialog

Answer 6

因此，如果我理解正确的话，您希望显示一个带有“确定”和“取消”选项的警报，并且除非单击“确定”，否则不会出现对话框。

与其使用另一个警报，为什么不尝试使用另一个包含“确定”和“取消”的对话框呢？

在您的 html 中执行此操作：

<div id = "hiddenDialogElements">
  <button id = "Ok" onclick = "confirm(true)">OK</button>
  <button id = "Cancel" onclick = "confirm(false)">Cancel</button>
</div>

使用此 css：

#hiddenDialogElements
{
   display: none;
}

然后您可以在将创建 dialog 的事件上执行此操作（您想要等待的位置）：

$('#hiddenDialogElements').dialog ({
//代码
});

这是：

function confirm(ifOk)
{
    if(ifOk)
    {
        //Create Dialog
    }else {
        //Do nothing
    }
}

Answer 7

做这样的事情...

function MyAlert(Message, Title,FuncExecAfterOkPressed) {

$("<div>" + Message + "</div>").dialog({
    title: Title,
    dialogClass: "alert",
    width: "auto",
    modal:true,
    open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); },
    buttons: [
    {
        text: "Ok", click: function () {               
            $(this).dialog("close");
            if (FuncExecAfterOkPressed != null) {
                $.Callbacks().add(FuncExecAfterOkPressed).fire(null);
            }
        }
    }]
});

}

现在这样称呼它

 MyAlert(data, "Duplicate", function () {
                            alert("I m moumit");
                            $("#Name").val("");
                        });

你需要的一件事是 JQueryUI 插件...享受吧。

Answer 8

您可以将附加代码放入“确定”和“取消”按钮功能中。例如：

"Okay": function() {
    $(this).dialog("close");
    alert(is_okay);
},

Answer 9

这不可能以“好的”方式完成，而且我强烈建议不要这样做。

您所描述的是一个完全阻塞的模态窗口/对话框，这对于 Web 应用程序来说非常棒。您已经使用 modal 标志创建了对话框，因此当对话框打开时，用户实际上无法在您的网站上执行任何操作，但 UI 会保持响应。

同样，实际上没有办法“保持”代码执行。任何朝这个方向的方法都会冻结 UI 线程，因为 Javascript 和 UI 更新共享同一个线程。

多年来，开发人员推动 Javascript 变得越来越非阻塞（浏览器中的 Javascript 实际上总是遵循这条路线，这是非常好的事情）。这个想法在后端的 NodeJS 中重生。所以，你在这里逆流而上，不要这样做。

无论你试图解决什么问题，尝试以不同的方式思考。考虑函数式，使用回调和事件，考虑... ECMAscript！ ：p