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的建议。）

这可能是因为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); 
      } 
     } 
    }); 
});

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禁用对话框。这样用户在流程完成时不能点击任何东西。

谢谢，我错过了这个方法。仅供参考，它与我提出的原始问题具有与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有足够的时间显示覆盖。

希望这会有所帮助！

答

$ .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(); 
     } 
    } 
});

+1 - 非常感谢！你的淡入淡出为我的问题做了魔术:) – 2013-08-15 09:52:18

BlockUI花费太长的时间来阻止jQuery对话框

相关推荐