JQuery的Ajax成功函数在beforeSend之后被调用

Question

我有以下JavaScript代码：

function someFunction(string) {
    $.ajax({
        type: "GET",
        url: "some_endpoint_returning_json",
        async: false,
        data: "param=" + string,
        beforeSend: function() {
            $.blockUI({ message: '<h1><img src="static/busy.gif" /> Just a moment...</h1>' });
        },
        complete: function () {
            $.unblockUI();
         },
        dataType: "json",
        success: function(data) {
            window.alert(data.status);
        }
    });
}

我希望在发送 ajax 请求之前，UI可以显示包含消息的阻止提示，然后删除该消息，解除UI阻止并执行成功函数。

当前发生了以下情况：

1. UI被阻止，但没有显示消息
2. 成功窗口警报弹出
3. 确认警报窗口后，BlockUI消息会短暂地弹出，然后 UI 解除阻止，页面返回其初始状态

- matt

---

你为什么将 async 设置为 false？这是你问题的主要原因。 - Explosion Pills

调试时，你能否将服务器代码的执行延迟几秒钟？可能是因为在浏览器刷新动作发生之前，ajax请求已经从服务器返回。 - Arun P Johny

因为异步设置为false。感谢大家的快速回复。我不是UI专家，只是在电视上扮演一个。 - matt

Answer 1

如果将async设置为false，浏览器会在ajax请求被服务时停止执行所有内容。尽管beforeSend在ajax请求发送之前执行，但同步请求可能会非常快速，以至于浏览器实际上不会刷新屏幕并显示您的$.blockUI更改。您可以在ajax完成后（立即删除它们）的短时间内看到它们。

如果您必须使用异步，则可以通过单独调用$.blockUI并在开始ajax请求之前设置短暂超时（例如100 MS）来解决此问题。

- Explosion Pills