Javascript Jquery/ajax：等待第一个函数完成，然后执行第二个函数

我有3个以上的函数，我想执行第一个函数，当它完成时，我将执行第二个函数，依此类推。 这是我试图使用的代码，但它会在一段时间内执行所有函数

var categoriesReady=$.Deferred（）；
var linksReady=$.Deferred（）；
var dataReady=$.Deferred（）；
函数getCategories（）{
$.getJSON（serviceURL+“获取类别”函数（数据）{
cats=data.categories；
$。每个（猫，功能（索引，猫）{
$（“#菜单”）.append（“
”）；
});
});
categoriesReady.resolve（）；
}
函数getLinks（）{
$.getJSON（serviceURL+“获取链接”，函数（数据）{
links=data.links；
$.each（链接、函数（索引、链接）{
$（“#菜单”）.append（“
”）；
});
});
linksReady.resolve（）；
}
函数getLinks（）{
$.getJSON（serviceURL+“获取链接”，函数（数据）{
cats=data.categories；
$。每个（猫，功能（索引，猫）{
$（“#菜单”）.append（“
”）；
});
});
linksReady.resolve（）；
}
函数getData（）{
$.getJSON（serviceURL+“获取链接”，函数（数据）{
posts=data.posts；
$。每个（猫、功能（索引、帖子）{
$（“#menuIcons”）.append（'A:'+post.content）；
});
});
dataReady.resolve（）；
}
函数init（）{
$（“body”）.append（“完成了3个函数！”）；
}
$.when（getCategories（）、getLinks（）、getData（））。然后（init）您只希望在操作完成时解析，因此需要将其放置在回调中：

function getCategories(){
  $.getJSON(serviceURL + 'get_categories', function(data) {
        cats = data.categories;
        $.each(cats, function(index, cat) {
            $("#menuIcons").append('<li><a data-ajax="false" href="ca.html?id='+cat.id+'">'+cat.title+'</a></li>');
        });
        categoriesReady.resolve();
    });
}

函数getCategories（）{
$.getJSON（serviceURL+“获取类别”函数（数据）{
cats=data.categories；
$。每个（猫，功能（索引，猫）{
$（“#菜单”）.append（“
”）；
});
categoriesReady.resolve（）；
});
}

---

…并对所有其他对象执行相同的操作

由于ajax返回承诺，因此无需使用自定义延迟

function getCategories() {
    return $.getJSON(serviceURL + 'get_categories', function (data) {
        cats = data.categories;
        $.each(cats, function (index, cat) {
            $("#menuIcons").append('<li><a data-ajax="false" href="ca.html?id=' + cat.id + '">' + cat.title + '</a></li>');
        });
    });
}

function getLinks() {
    return $.getJSON(serviceURL + 'get_links', function (data) {
        links = data.links;
        $.each(links, function (index, link) {
            $("#menuIcons").append('<li><a data-ajax="false" href="link.html?id=' + link.id + '">' + link.title + '</a></li>');
        });
    });
    linksReady.resolve();
}

function getData() {
    return $.getJSON(serviceURL + 'get_links', function (data) {
        posts = data.posts;
        $.each(cats, function (index, post) {
            $("#menuIcons").append('A : ' + post.content);
        });
    });
}

function init() {
    $("body").append("3 function are done!");
}
getCategories().then(function () {
    var deferred = $.Deferred();
    $.when(getLinks(), getData()).done(function () {
        deferred.resolve();
    });
    return deferred.promise();
}).then(init);

函数getCategories（）{ return$.getJSON（serviceURL+'get_categories'，函数（数据）{ cats=data.categories； $。每个（猫，功能（索引，猫）{ $（“#菜单”）.append（“

”）； }); }); } 函数getLinks（）{ return$.getJSON（serviceURL+'get_links'，函数（数据）{ links=data.links； $.each（链接、函数（索引、链接）{ $（“#菜单”）.append（“

”）； }); }); linksReady.resolve（）； } 函数getData（）{ return$.getJSON（serviceURL+'get_links'，函数（数据）{ posts=data.posts； $。每个（猫、功能（索引、帖子）{ $（“#menuIcons”）.append（'A:'+post.content）； }); }); } 函数init（）{ $（“body”）.append（“完成了3个函数！”）； } getCategories（）。然后（函数（）{ var deferred=$.deferred（）； $.when（getLinks（），getData（））.done（函数（）{ 延迟。解决（）； }); 延迟返回。承诺（）； }).然后（初始化）；

---

演示：

我通常是这样做的

  var getCategories = function(){
           return $.getJSON(serviceURL + 'get_categories', function(data) {
                cats = data.categories;
                $.each(cats, function(index, cat) {
                    $("#menuIcons").append('<li><a data-ajax="false" href="ca.html?id='+cat.id+'">'+cat.title+'</a></li>');
                });
            });
        }
   var getLinks = function(){
            return $.getJSON(serviceURL + 'get_links', function(data) {
                links = data.links;
                $.each(links, function(index, link) {
                    $("#menuIcons").append('<li><a data-ajax="false" href="link.html?id='+link.id+'">'+link.title+'</a></li>');
                });
            });
        };

   var getData = function(){
            return $.getJSON(serviceURL + 'get_links', function(data) {
                posts = data.posts;
                $.each(cats, function(index, post) {
                    $("#menuIcons").append('A : '+post.content);
                });
            });
        } ;

  function init(){
        $("body").append("3 function are done!");
     }

  // chain your promises here
 getCategories().done(getLinks().done(getData().done(init())));

var getCategories=function（）{
return$.getJSON（serviceURL+'get_categories'，函数（数据）{
cats=data.categories；
$。每个（猫，功能（索引，猫）{
$（“#菜单”）.append（“
”）；
});
});
}
var getLinks=function（）{
return$.getJSON（serviceURL+'get_links'，函数（数据）{
links=data.links；
$.each（链接、函数（索引、链接）{
$（“#菜单”）.append（“
”）；
});
});
};
var getData=function（）{
return$.getJSON（serviceURL+'get_links'，函数（数据）{
posts=data.posts；
$。每个（猫、功能（索引、帖子）{
$（“#menuIcons”）.append（'A:'+post.content）；
});
});
} ;
函数init（）{
$（“body”）.append（“完成了3个函数！”）；
}
//把你的承诺拴在这里
getCategories（）.done（getLinks（）.done（getData（）.done（init（））））；

---

您还可以添加

.fail（）

来处理每个Ajax调用的错误

您可以立即解决延迟问题。您并不真正需要它们，只需返回$.getJSON，就像在

返回$.getJSON（…

中一样，它会起作用。问题是您正试图以同步方式执行异步代码。如果需要这样做，只需将下一个函数调用放在前一个函数的回调中即可。（例如，

getCategories（）

完成-它调用

getLinks（）

等）使用done函数：@adeneo我不明白你想解释的内容，你能说得更清楚吗？@YemSalat你能给我一个异步方法吗？如果我使用$.ajax呢？或者一个不支持回调的函数呢？任何异步操作都会有某种类型的回调（它可能被命名为其他类型）但是，我们的想法是，您只想在它完成后进行解析。

$.ajax

有几个不同的基于响应的回调。我应该在哪里找到任何函数返回的数据？@Hamzar在init函数中…查看附件fiddle这似乎非常简单和好，问题是我如何获得每个函数返回的结果函数？如果您查看每个函数（ajax调用），您可以处理错误和成功回调，就像您在上面的foreach示例中所做的那样-有关jQueryAjax和返回的处理程序的更多信息，请参见此处