Question

我正在尝试使用jQuery BlockUI Plugin来阻止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的建议持开放态度。）

Answer 1

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

Answer 2

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

Answer 3

继续上述评论：

当你调用$ .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有足够的时间来显示叠加层。

希望这有帮助！

Answer 4

您应该在用户点击“开始”按钮时使用disable() method禁用对话框，而不是阻止用户界面。这样，用户无法在流程完成时单击任何内容。

BlockUI需要很长时间才能阻止jQuery对话框

4 个答案: