单击时，jQuery按钮对话框没有立即关闭

Question

我有一个名为“显示全部”的按钮，当用户单击它时，它将弹出一个窗口，以确认用户是否要显示所有实体。 我为此对话框使用Jquery，我有：

function showAll() {
    $("#" + showAllDiv).show();
    $("#" + showAllDiv).dialog( {
         title: XXX,
         height: XXX,
         width: XXX,
         modal : true,
         buttons: {
             "Yes": function () {
                  $(this).dialog("close");
                  addLoadingFn(); // it will show a "please wait..." dialog
                  heavyDutyWorkFn();  //a function to get all data and show on the pop up HTML window;
                  deleteLoadingFn(); // it will close the "please wait..." dialog
             },
             Cancel: function() {
                  $(this).dialog("close");
             }
         }
    });
    $("#" + showAllDiv).html(You sure to show all?)
 }

问题是，当我单击“是”时，对话框不会立即关闭。 它仍然会保留一段时间，直到“ heavyDutyWorkFn（）”完成工作为止。 在另一个世界中，单击“是”后，$（this）.dialog（“ close”）将不会关闭，直到heavyDutyWorkFn（）完成显示所有数据为止。

有人知道发生了什么吗？ 任何帮助将不胜感激。 谢谢！

Answer 1

您可以与setTimeout() heavyDutyWorkFn()异步运行heavyDutyWorkFn() ，因此不会延迟脚本的其余部分。

function showAll() {
    $("#" + showAllDiv).dialog( {
         title: XXX,
         height: XXX,
         width: XXX,
         modal : true,
         buttons: {
             "Yes": function () {
                  $(this).dialog("close");
                  addLoadingFn(); // it will show a "please wait..." dialog
                  setTimeout(function() {
                    heavyDutyWorkFn();  //a function to get all data and show on the pop up HTML window;
                    deleteLoadingFn(); // it will close the "please wait..." dialog
                  }, 1);
             },
             Cancel: function() {
                  $(this).dialog("close");
             }
         }
    }).html("You sure to show all?")
 }

顺便说一句，没有必要调用.show() ，因为.dialog()自动显示对话框（除非您使用autoOpen: false ）。