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

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

jquery

BlockUI阻止jQuery对话框花费的时间太长,jquery,blockui,Jquery,Blockui,我试图在jQuery执行排序算法时使用来阻止它。排序函数的工作方式如下： doSort : function() { $("#sort_dlg").block(); // sort... takes a few seconds $("#sort_dlg").unblock(); } 有点管用。直到排序完成后，对话框才会被阻止。（排序都是在本地完成的，没有AJAX调用或任何东西。）如何在排序之前阻止它我尝试将block（）调用移动到对话框的OK按钮方法： $(fun

我试图在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();
            }
        }
    });
});

但那没用。（我愿意接受使用其他技术阻止用户界面的建议。）

您不应该阻止用户界面，而应该在用户单击“go”按钮时立即禁用对话框。这样，用户就不能在流程完成时单击任何内容。

正如@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);
            }
        }
    });
});

继续我的上述评论：

调用$.blockUI（）时，它使用动画在blocking 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>


试验
$（函数（）{
$（“#btnTest”）。单击（函数（）{
$.blockUI（）；
setTimeout（docomplementstuff，1000）；
});
});
函数doComplicatedStuff（）
{
对于（i=0；i<100000000；i++）
{
//哦，复杂的逻辑！
}
$.unbui（）；
}

虽然这不是一门精确的科学，但我们基本上猜测，将复杂的代码延迟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();
        }
    }
});

这可能是因为blockUI使用动画在模式弹出窗口中淡出，当这些动画异步运行时，排序代码开始运行。由于排序代码在页面上同步运行，因此浏览器将被阻止，直到排序代码完成。你的答案是使用一个回调函数，我现在正在研究这个函数……谢谢大家，这很有效。现在我必须决定是使用BlockUI还是使用disable（）方法（由Soviut建议）。我倾向于BlockUI，因为我认为告诉用户“请稍候…”更简单。使用disable（），我不知道如果不手动插入一个内部带有“请稍候…”的半透明div，如何执行同样的操作。谢谢，我错过了这个方法。仅供参考，它与我最初的问题中提到的BlockUI有相同的问题。Villageidiot和Pandincus建议的设置超时技术可以解决这个问题。+1-非常感谢，伙计！你的fadeIn东西对我的问题起了神奇的作用：）