javascript - jQuery ajax beforeSend

Question

我有一个简单的 AJAX 调用，它在beforeSend和 上执行一个函数complete。他们执行得很好，但是beforeSend“似乎”直到成功之后才执行。

上面beforeSend有“请稍候”通知。如果我在函数之后休息一下beforeSend那么它将显示该通知，然后成功。如果没有断点，那么它将坐在那里并在等待响应时思考，然后我的请等待通知将在成功命中后出现几分之一秒。

所需的功能是在发送请求后立即显示通知，以便在等待响应时显示。

        $.ajax({
            type : 'POST',
            url : url,
            async : false,
            data : postData,
            beforeSend : function (){
                $.blockUI({
                    fadeIn : 0,
                    fadeOut : 0,
                    showOverlay : false
                });
            },
            success : function (returnData) {
                //stuff
            },
            error : function (xhr, textStatus, errorThrown) {
                //other stuff
            },
            complete : function (){
                $.unblockUI();
            }
        });

Answer 1

Your problem is the async:false flag. Besides the fact that it is bad practice (and really only makes sense in a very limited number of cases), it actually messes with the order of execution of the rest of the code. Here is why:

It seems that somewhere in the blockUI code they are setting a setTimeout. As a result, the blockUI code waits a very short amount of time. Since the next instruction in the queue is the ajax() call, the blockUI execution gets placed right behind that. And since you are using async:false, it has to wait until the complete ajax call is completed before it can be run.

In detail, here is what happens:

• You call blockUI
• blockUI has a setTimeout and gets executed after the timeout is done (even if the timeout length is 0, the next line, ajax() will be run first)
• ajax() is called with async:false, which means JS stops everything until the request returns
• ajax() returns successfully and JS execution can continue
• the setTimeout inside blockUI code is probably over, so it will be executed next
• it looks like blockUI runs as part of success, but in reality, it has just been queued up because of a timeout

If you would NOT use async:false, the execution would go as followed:

• You call blockUI
• blockUI has a setTimeout and gets executed after the timeout is done (even if the timeout length is 0, the next line, ajax() will be run first)
• ajax() is called and sends of a request to the server.
• while it is connecting to the server, normal JS execution continues
• the setTimeout inside blockUI code is probably over, so it will be executed next
• the blockUI text shows up
• unless there is more JS code somewhere, JS execution is done until the AJAX success and complete callbacks are executed

Here are some jsFiddle examples to demonstrate the problem:

Example 1: This is the situation you are experiencing. The blockUI text doesn't show until after the ajax call executes.

Example 2: This is the exact same situation as yours, but with an alert before the ajax call. Because there is an alert, the timeout inside blockUI places the appearance of the blockUI text after the alert instead of after the ajax.

Example 3: This is how it is supposed to work without async:false

Answer 2

这很可能是因为async : false. 由于您的调用是同步的，因此在您开始调用该$.ajax()函数后，在收到响应之前什么都不会发生，并且就您的代码而言，接下来的事情将是success处理程序

为了让它工作，你可以做这样的事情

$.blockUI({
        fadeIn : 0,
        fadeOut : 0,
        showOverlay : false
});
// and here goes your synchronous ajax call
$.ajax({
            type : 'POST',
            url : url,
            async : false,
            data : postData,
            success : function (returnData) {
                //stuff
            },
            error : function (xhr, textStatus, errorThrown) {
                //other stuff
            },
            complete : function (){
                $.unblockUI();
            }
     });

Answer 3

$.blockUI({
        fadeIn : 0,
        fadeOut : 0,
        showOverlay : false
});
setTimeout(function() {
     $.ajax({
            type : 'POST',
            url : url,
            async : false,
            data : postData,
            success : function (returnData) {
                //stuff
            },
            error : function (xhr, textStatus, errorThrown) {
                //other stuff
            }
     });
},100);
$.unblockUI();

http://bugs.jquery.com/ticket/7464

Answer 4

另一种方法可能是重载 $.ajax 函数

$.orig_ajax = $.ajax;

$.ajax = function() {
    var settings = {async: true};
    if (2 == arguments.length && 'string' == typeof arguments[0] && 'object' == typeof arguments[1])
        settings = arguments[1];
    else if (arguments.length && 'object' == typeof arguments[0])
        settings = arguments[0];

    if (!settings.async && 'function' == typeof settings.beforeSend) {
        var args = arguments;

        settings.beforeSend();
        var dfd = $.Deferred();
        setTimeout(function() {
            $.orig_ajax.apply($, args).then(dfd.resolve)
                                      .fail(dfd.reject);
        } ,100);
        return dfd.promise();
    } else
        return $.orig_ajax.apply($, arguments);
};

不完美（因为不同的延迟对象），但可能会有所帮助..