javascript - jQuery ajax 发送前

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

您的问题是 async:false 标志。除了这是不好的做法(并且实际上只在非常有限的情况下有意义)这一事实之外，它实际上还扰乱了其余代码的执行顺序。原因如下:

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

具体来说，发生的情况如下:

• 您调用blockUI
• blockUI 有一个 setTimeout 并在超时后执行(即使超时长度为 0，下一行 ajax() 将首先运行)
• ajax() 使用 async:false 调用，这意味着 JS 会停止一切，直到请求返回
• ajax()成功返回，JS可以继续执行
• blockUI 代码中的 setTimeout 可能已经结束，因此接下来会执行
• 看起来blockUI作为成功的一部分运行，但实际上，它只是因为超时而排队

如果您不使用async:false，执行将如下所示:

• 您调用blockUI
• blockUI 有一个 setTimeout 并在超时后执行(即使超时长度为 0，下一行 ajax() 将首先运行)
• ajax() 被调用并向服务器发送请求。
• 当它连接到服务器时，正常的 JS 执行继续
• blockUI 代码中的 setTimeout 可能已经结束，因此接下来会执行
• blockUI 文本显示
• 除非某处有更多 JS 代码，否则 JS 执行将完成，直到执行 AJAX success 和 complete 回调

这里有一些 jsFiddle 示例来演示该问题:

Example 1 : 这就是你现在遇到的情况。 blockUI 文本在 ajax 调用执行后才会显示。

Example 2 :这与您的情况完全相同，但在 ajax 调用之前有一个 alert。由于存在 alert，因此 blockUI 内的超时会将 blockUI 文本的外观放置在 alert 之后，而不是在ajax之后。

Example 3 :这就是没有 async:false

的情况下它应该如何工作