單擊時，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 ）。