javascript - 在 beforeSend 之后调用 JQuery Ajax 成功函数

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

我希望 UI 在发送 ajax 请求之前阻止包含的消息，然后删除消息，取消阻止 ui，然后执行成功功能。

目前这是正在发生的事情：

1. UI 阻塞，但不显示消息
2. 弹出成功窗口提示
3. 确认警报窗口后，会弹出 BlockUI 消息一瞬间，然后 UI 解除阻塞，页面返回其初始状态

Answer 1

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

如果您必须使用异步，您可以通过$.blockUI单独调用并在启动 ajax 请求之前设置一个短暂的超时（可能为 100 毫秒）来解决这个问题。