BlockUI花費太長的時間來阻止jQuery對話框

我試圖在執行排序算法時使用jQuery BlockUI Plugin來阻止jQuery對話框。這種排序的功能是這樣的：BlockUI花費太長的時間來阻止jQuery對話框

doSort : function() { 
    $("#sort_dlg").block(); 

    // sort... takes a few seconds 

    $("#sort_dlg").unblock(); 
}

它的工作，種。直到排序完成後，對話纔會被阻止。（排序全部在本地完成，沒有AJAX調用或任何東西。）如何在排序前阻止它？

我試過block()呼叫移動到對話框中的OK按鈕方法：

$(function() { 
    $("#sort_dlg").dialog({ 
     autoOpen: false, 
     bgiframe: true, 
     modal: true, 
     buttons: { 
      "Cancel": function() { $(this).dialog("close"); }, 
      "OK": function() { 
       $("#sort_dlg").block(); 
       doSort(); 
      } 
     } 
    }); 
});

但是這並沒有幫助。（我接受使用其他技術阻止UI的建議。）

來源

2009-10-14 twh

這可能是因爲blockUI使用動畫淡入模式彈出窗口，並且這些動畫異步運行時，您的排序代碼開始運行。由於您的排序代碼在您的頁面上同步運行，瀏覽器將被阻止，直到排序代碼完成。你的答案是使用一個回調函數，我現在正在研究... – Pandincus 2009-10-14 04:12:51

通過@Pandincus如指出，你可以等待一段時間，讓blockUI完成工作，然後開始排序：

$(function() { 
    $("#sort_dlg").dialog({ 
     autoOpen: false, 
     bgiframe: true, 
     modal: true, 
     buttons: { 
      "Cancel": function() { $(this).dialog("close"); }, 
      "OK": function() { 
       $("#sort_dlg").block(); 
       //WAIT FOR 1 SECOND BEFORE STARTING SORTING 
       setTimeout(function(){ doSort()}, 1000); 
      } 
     } 
    }); 
});

來源

2009-10-14 04:17:46 TheVillageIdiot

O noes！毆打一拳！：好的，先生。 – Pandincus 2009-10-14 04:19:41

謝謝你們，這有效。現在我必須決定是使用BlockUI還是disable（）方法（由Soviut建議）。我傾向於BlockUI，因爲我認爲告訴用戶「請稍等...」更簡單。使用disable（），我不知道如何做到這一點，而不用手動插入一個半透明的div與「請稍等......」裏面。 – twh 2009-10-15 16:49:44

而不是阻止UI，您應該在用戶單擊「go」按鈕時使用disable() method禁用對話框。這樣用戶在流程完成時不能點擊任何東西。

來源

2009-10-14 04:15:09 Soviut

謝謝，我錯過了這個方法。僅供參考，它與我提出的原始問題具有與BlockUI相同的問題。 TheVillageIdiot和Pandincus建議的setTimeout技術可以解決這個問題。 – twh 2009-10-15 16:50:55

要繼續我的上述評論：

當你調用$ .blockUI（），它使用動畫來淡入阻塞div，並且這些動畫是異步運行的。您的JavaScript代碼中的下一行是您的複雜排序，並且此代碼會阻止瀏覽器直到完成。因此，開始運行的動畫在排序之後纔會完成！

的BlockUI插件似乎並不有一個回調函數的選擇，這是一種恥辱，但沒關係 - 我們可以使用JavaScript的內置的setTimeout：

<head> 
    <title>Test</title> 
    <script src="jquery.js"></script> 
    <script src="jquery.blockUI.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $("#btnTest").click(function() { 
       $.blockUI(); 
       setTimeout(doComplicatedStuff, 1000); 
      }); 
     }); 
     function doComplicatedStuff() 
     { 
      for(i = 0; i < 100000000; i++) 
      { 
       // ooh, complicated logic! 
      } 
      $.unblockUI(); 
     } 
    </script> 
</head> 
<body> 
    <p><input type="button" id="btnTest" value="Test" /></p> 
</body>

雖然這不是一個精確的科學，我們基本上猜測，拖延複雜的代碼1秒將使BlockUI有足夠的時間顯示覆蓋。

希望這會有所幫助！

來源

2009-10-14 04:19:12 Pandincus

$ .blockUI有一個名爲「fadeIn」的選項，默認爲200毫秒。您可以將此值設置爲零，以便在調用方法時立即生成頁面塊。這將禁用fadeIn。

$(function() { 
$("#sort_dlg").dialog({ 
    autoOpen: false, 
    bgiframe: true, 
    modal: true, 
    buttons: { 
     "Cancel": function() { $(this).dialog("close"); }, 
     "OK": function() { 
      $("#sort_dlg").block({ fadeIn: 0 }); // disable fadeIn 
      doSort(); 
     } 
    } 
});

來源

2010-08-30 21:26:11 radian21

+1 - 非常感謝！你的淡入淡出爲我的問題做了魔術:) – 2013-08-15 09:52:18

BlockUI花費太長的時間來阻止jQuery對話框

回答

相關問題