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回调内部调用blockUI，最终会得到几乎相同的结果。

在jQuery中没有什么可以防止这种行为，因为它不是一个jQuery错误（也不是浏览器本身，看到同步xhr请求应该冻结浏览器而且没有任何说明浏览器有在那种情况下继续进行回流。）

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

您可以查看Why You Should Use XMLHttpRequest Asynchronously

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

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

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

在同步调用之前调用函数

4 个答案: