在同步调用之前先调用函数

Question

我有一个简单的问题（但答案似乎并不简单）。

我的代码中有一个同步AJAX调用，我想在这个同步调用之前调用一个函数。

我想调用的函数只是

$.blockUI();

来自jQuery BlockUI插件。

我只是试着把这一行放在$.ajax调用之前，但blockUI似乎是在同步调用之后调用的。

然后我尝试使用$.ajax的beforeSend选项，和上面的问题相同。

提前感谢你能带来的任何答案（除了使用异步呼叫，这在我的情况下是不可能的…）

此处提供代码：http://jsfiddle.net/vWsus/2/

Answer 1

同步调用很糟糕，它们会锁定浏览器，如果不返回调用，则用户体验不佳。问题是同步调用锁定了浏览器，因此DOM永远没有时间重新绘制。您需要给DOM更新时间，所以在进行Ajax调用之前设置一个超时。

$.blockUI({ message: '<p>foo</p>' });
window.setTimeout( ajxCallFnc, 100);

Answer 2

在您的情况下，并不是在同步调用之后调用blockUI，只是同步请求阻止了显示回流（这通常比实际的DOM操作"有时晚"发生）。正如你所说，当你尝试；在调用ajax之前调用blockUI，而不是从beforeSend回调内部调用，最终会得到几乎相同的结果。

jQuery中无法阻止这种行为，因为它不是jQuery错误（也不是浏览器本身，因为同步xhr请求无论如何都应该冻结浏览器，并且没有任何内容表明浏览器必须在这种情况下继续回流）。

我所能建议的就是永远不要使用同步请求。异步的很容易处理。

您可以看看为什么应该异步使用XMLHttpRequest

Answer 3

$.blockUI有一个onBlock函数。试试这样的东西：

$.blockUI({ 
    message: '<img id="processing" src="images/loading.gif" />', 
    onBlock: function() {
        // make your sync call here
        $.ajax({
            type: 'POST',
            cache: false,
            async: false,               
            url: blahblah,
            dataType: 'json'                
        }).done(function(data){
            //process response
        });
    }
}); 

Answer 4

this.notifyFixed=function(type,msg,callback){
        this.showNotification(type, msg);
            window.setTimeout(function(){
                if(typeof callback ==="function"){
                    callback();
                }
            },100);
    };

我有一个notifyFixed函数，我想在进行ajax调用之前做它，但遇到了同样的问题，所以我添加了超时和一个类似于epascarello的回调函数，似乎对我来说很好。

因此，希望类似的解决方案可以帮助其他人