jquery - 处理 jQuery ajax 异步调用的最佳方法是什么？

Question

我最近开始了一个使用重型客户端 jQuery/javascripts 的项目。我正在努力让其中一个屏幕正常工作。

我的功能如下：

function init{
  populateTypes();
  populateGroups();
  populateStatuses();
  applyCurrentUserSettings();
}

所有populate*方法都对服务器进行 ajax 调用 ( $.ajax) 并填充视图上的一些复选框列表。applyCurrentUserSettings方法还发出 ajax 请求并在视图上设置当前用户选择。

问题是populate*方法是异步的，并且通过applyCurrentUserSettings调用该方法，复选框列表“有时”为空，并且应用方法失败。

我可以通过传入调用来完成这项工作，或者async: false将$.ajax每个 ajax 调用链接到另一个调用中，但我想知道是否有更好的方法/设计模式来处理这种情况。

Answer 1

您可以让所有函数返回 deferreds 并使用$.when. http://api.jquery.com/jQuery.when/

function populateTypes () {
    //your code
    return $.ajax(...);
}


$.when(populateTypes(), populateGroups(), ...).then(applyCurrentUserSettings);

Answer 2

构建您的函数，以便它们正确返回 Promise 对象，然后使用 .then 方法一个接一个地链接多个，或者使用 .when 方法发送 x 个它们，然后在所有这些都完成时执行某些操作。

function populateTypes () {
    //your code
    return $.ajax(...);
}

以下内容一次发送 1 个：

function init () {
    populateTypes().then(populateGroups)
        .then(populateStatuses)
        .then(applyCurrentUserSettings)
        .done(function(){
            console.log("all done");
        });
}

以下内容一次发送除最后一个之外的所有内容，并且在前三个完成后发送最后一次：

function init () {
    $.when(populateTypes(), populateGroups(), populateStatuses())
        .then(applyCurrentUserSettings)
        .done(function(){
            console.log("all done");
        });
}

Answer 3

我相信您可以使用 ajaxComplete() 来延迟触发，applyCurrentUserSettings直到查询完成。