Jquery/ajax ：等到第一个函数完成并执行第二个函数答案

【问题标题】：Jquery/ajax : wait untill the first function finish and execute the secondJquery/ajax ：等到第一个函数完成并执行第二个函数
【发布时间】：2015-04-17 00:58:35
【问题描述】：

我有超过 3 个函数，我想执行第一个函数，完成后我将执行第二个函数，依此类推。这是我尝试使用的代码，但它会在一段时间内执行所有功能。

var categoriesReady = $.Deferred();
var linksReady = $.Deferred();
var dataReady = $.Deferred();

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

function getLinks(){
  $.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 getLinks(){
  $.getJSON(serviceURL + 'get_links', 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>');
		});
	});
	linksReady.resolve();
}

function getData(){
  $.getJSON(serviceURL + 'get_links', function(data) {
		posts = data.posts;
		$.each(cats, function(index, post) {
			$("#menuIcons").append('A : '+post.content);
		});
	});
	dataReady.resolve();
}
function init(){
  $("body").append("3 function are done!");
}
$.when(getCategories(),getLinks(),getData()).then(init);

什么问题？

【问题讨论】：

您立即解决延期问题。你真的不需要它们，只需返回 $.getJSON，就像在 return $.getJSON(... 中一样，它会起作用
问题是您试图以同步方式执行异步代码。如果您需要这样做 - 只需将下一个函数调用放在前一个函数的回调中。（例如，当getCategories() 完成时，它会调用getLinks() 等）
使用完成功能：stackoverflow.com/q/23065907/3155563
@adeneo 我没有明白你要为我解释的内容，你能说得清楚一点吗？
@YemSalat 你能给我异步事物的idea方法吗？

标签： javascript jquery ajax

【解决方案1】：

我通常是这样做的

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

您还可以添加.fail() 来处理每个 Ajax 调用的错误

【讨论】：

这看起来很轻松很好，问题是我怎样才能得到每个函数返回的结果？
如果您查看每个函数（ajax 调用），您可以处理错误和成功回调，就像您在上面的示例中使用 foreach 所做的一样 - 请参阅此处了解有关 jQuery AJAX 和返回处理程序的更多信息 @987654321 @

【解决方案2】：

你只想在操作完成后解析，所以需要放在回调里面：

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

..对所有其他人做同样的事情

【讨论】：

如果我使用 $.ajax 会怎样？还是不支持回调的函数？
任何异步操作都会有某种类型的回调（它可能被命名为别的东西），但这个想法只是你只想在它完成后解决。 $.ajax 有几个基于响应的不同回调

【解决方案3】：

不需要使用自定义延迟，因为 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);

演示：Fiddle

【讨论】：

我应该在哪里找到任何函数返回的数据？
@Hamzar 在 init 函数中...见附上的小提琴