除非我先显示警报，否则 JQuery blockUI 不起作用答案

【问题标题】：JQuery blockUI doesn't work unless I show an alert first除非我先显示警报，否则 JQuery blockUI 不起作用
【发布时间】：2017-01-29 17:13:29
【问题描述】：

我无法让 JQuery blockUI 正常工作。我正在使用此代码：

$.blockUI({
    message : null,
    overlayCSS : {
        backgroundColor : '#000000;',
        opacity : .4
    }
});

如果我只是调用上面然后调用下面的 sleep 函数，我会得到以下行为： 5秒内没有任何反应方块闪烁

var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > 5000) {
        break;
    }
}

如果我运行这段代码：

alert("foo");
$.blockUI({
    message : null,
    overlayCSS : {
        backgroundColor : '#000000;',
        opacity : .4
    }
});
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > 5000) {
        break;
    }
}
alert("bar");

我得到以下行为：

出现警报和阻止（我可以无限期地等待我清除警报）
当我清除警报按钮 5 秒内没有任何反应
警报切换到“栏”消息
当我解除警报时警报和阻止程序清除

【问题讨论】：

因为 for 循环会锁定页面，所以什么都不会运行……这是个坏主意。
从你所说的听起来好像有一个线程由 jquery blockUI 方法启动，当我的“睡眠”代码执行时没有机会完成。有没有办法可以重新编写睡眠代码，使其仅暂停当前线程并让后台线程继续并绘制阻塞窗格？

标签： javascript jquery jquery-blockui

【解决方案1】：

我最终将交互的“睡眠”部分移至服务器，并在客户端上使用了类似的东西：

<header>
    <script language="javascript">
        function blockExample() {
            // block the ui
            $.blockUI({
                message : null,
                overlayCSS : {
                    backgroundColor : '#00f'
                }
            });
            // do the ajax call
            $.ajax({
                url : "${home}/action/wait/WaitAction?howLong=5000",
                type : "get",
                success : function(data) {
                    $.unblockUI();
                },
                error : function() {
                    alert("error");
                }
            });
        }
    </script>
</header>

<div align="center">
    <a href="javascript:blockExample()">Click me to block this page for 5 seconds</a>
</div>

【讨论】：