jquery ajax beforesend [英] jquery ajax beforesend

问题描述

我有一个简单的ajax调用，它在beforeSend和on complete上执行一个函数。它们执行得很好但是beforeSend看似在成功之后才会被执行。在发送之前有一个请稍候通知。如果我在beforeSend中的函数之后放了一个休息，那么它将显示该通知然后点击成功。没有断点，那么它将坐在那里等待响应时思考，然后我的请等待通知将在成功命中后出现几分之一秒。所需的功能是在请求发送后立即显示通知，以便在等待响应时显示。

I have a simple ajax call that is executing a function on the beforeSend and on complete. They execute fine but the beforeSend is "seemingly" not executed until after the success. On the before send there is a "Please wait" notification. If I put a break after the function in the beforeSend then it will show that notification and then hit the success. Without the break point then it will sit there and think while waiting for the response and then my please wait notification will appear for a fraction of a second after the success is hit. The desired functionality is to have the notification appear as soon as the request is sent so it displays while it is waiting for the response.

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

推荐答案

你的问题是 async ：false 标志。除了它是不好的做法（实际上只在非常有限的情况下才有意义），它实际上与其余代码的执行顺序混淆。原因如下：

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:

似乎在 blockUI 代码的某处，他们设置了的setTimeout 。因此， blockUI 代码会等待很短的时间。由于队列中的下一条指令是 ajax（）调用，因此 blockUI 执行就在它后面。由于您使用的是 async：false ，因此必须等到完成 ajax 调用之后才能完成运行。

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:

• 你打电话给 blockUI


• blockUI 有一个setTimeout并在超时完成后执行（即使超时长度为0，下一行 ajax（）也将首先运行）


• 使用 async：false 调用ajax（），这意味着JS会在请求返回之前停止所有内容


• ajax（）成功返回，JS执行可以继续


• blockUI 代码可能已结束，因此将在下一步执行


• 它看起来像 blockUI 作为的一部分运行成功，但实际上，它因超时而排队等候

• 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

如果你不愿意使用 async：false ，执行将如下所示：

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

• 您致电 blockUI


• blockUI 有一个setTimeout并在超时完成后执行（即使超时长度为0，下一行， ajax （）将首先运行）


• 调用ajax（）并将请求发送给服务器。


• 当它连接到服务器时，正常的JS执行继续


• blockUI 代码可能已结束，因此将在下一步执行


• blockUI 文字显示


• 除非在某处有更多的JS代码，否则JS执行完成直到AJAX success 和完成回调为止执行

• 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

以下是一些证明问题的jsFiddle示例：

Here are some jsFiddle examples to demonstrate the problem:

< a href =http://jsfiddle.net/sSzjR/1/ =noreferrer>示例1 ：这是您遇到的情况。在 ajax 调用执行之后， blockUI 文本才会显示。

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

示例2 ：这与您的情况完全相同，但 alert 在 ajax 之前调用。因为有一个 alert ， blockUI 内的超时会放置 blockUI的外观 警告之后的文字，而不是 ajax 之后的文字。

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.

示例3 ：这是如何在没有<$ c $的情况下工作的c> async：false

这篇关于jquery ajax beforesend的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！