Question

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

＆＃13;

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

＆＃13;

问题是什么？

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

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

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

Answer 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

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

3 个答案: