javascript - Jquery/ajax : wait untill the first function finish and execute the second

Question

我有超过 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);

问题是什么？

Answer 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 调用的错误