javascript - 我如何知道特定函数的所有 AJAX 调用何时完成？

Question

我有一个函数，其中有许多不同的函数调用，其中有许多 ajax 调用。我如何知道由 $("#save").click(...) 触发的所有 ajax 调用是否已完成？

$("#save").click(function() {

    saveUpdateSeatDetails();
    markAbsent();

    setTimeout(function() {
        location.reload();
    }, 369);
});

我尝试使用async: false，但我收到建议它已被弃用的警告。

我还提到了How to know when all ajax calls are complete? 。但是，这适用于整个页面。我希望这仅适用于特定功能。

(没有 ES6)

Answer 1

你应该使用 jQuery 的 Deferred (略有不同，但大部分与 Promises 兼容)，由 $.ajax 调用返回。我假设您在这里使用 $.ajax 因为您在答案中使用了 jQuery。

您需要更新函数以返回 $.ajax 调用:

function saveUpdateSeatDetails() {
    return $.ajax("http://example.com...");
}

function markAbsent() {
    return $.ajax("http://example.com...");
}

然后你可以这样做:

$("#save").click(function() {
    $.when(saveUpdateSeatDetails(), markAbsent()).done(function() {
         alert("test")
    });
});

$.when 在执行函数之前等待 Ajax 请求完成。

由于这是 jQuery 1.5+ 的一部分，因此任何与 jQuery 兼容的浏览器都能够运行此代码(不需要 ES6)。