jQuery链接和级联然后是什么时候 [英] jQuery chaining and cascading then's and when's

问题描述

我目前在我面前有一个非常棒的if-then-else循环，首先从网络服务获得多个cantinas。然后它会获得所有可用餐点（每个菜单）和所有可用的配菜（每个菜单）。对于每一餐和两餐，它然后检查所有添加剂并聚集它们。

I currently have a humongous if-then-else loop in front of me which first gets multiple cantinas from a webservice. Then it gets all available meals (for each menu) and all available side dishes (for each menu). For each of the meals as well as the sides it then checks for all additives and aggregates them.

最后我有多餐菜单，配菜及其所有添加剂。

以下流程图显示了该过程：

The following flowchart shows the process:

我想美化代码并希望利用jQuery的promises - 但是我无法弄明白该怎么做，因为我必须在后之后堆叠然后（至少我想想，也许我必须解决？）。以下是我最好的尝试：

I want to beautify the code and want to make use of promises with jQuery - but I can't figure out how to do it as I have to stack a then after a when (at least I think, maybe I have to resolve?). The following is my best try:

//this totally does not work at all, but you get the idea what I want to do
Menus.getCantinas()
       .when(Menus.getMeals(cantinas), Menus.getSides(cantinas)) //when doesn't exist here, neither does cantinas
         .then(Menus.getAdditives(meals, sides) //also throws errors as meals and sides does not exist
           .done(function(cantinas, meals, sides, additives) { //more errors for the people
             Menus.cantinas = cantinas;
             Menus.meals = meals;
             Menus.sides = sides;
             Menus.additives = additives;

             //... some html stuff to build the menus
           });

请务必查看以下代码段以获取更多解释性代码。

window.Menus = {
	cantinas = {},
	meals = {},
	sides = {},
	additives = {},
	callWebservice: function (listname, filter)
    {
        if (filter && filter != '')
            data['$filter'] = filter;

        return jQuery.ajax({
            url: '/_api/web/lists/getbytitle(\'' + listname + '\')/items',
            data: data,
            dataType: 'json'
        });
    },

	getCantinas: function() {
		return Menus.callWebservice("Cantinas", "");
	},
	
	getMeals: function(cantinas) {
		var filterString;
		for (var i = 0; i < cantinas.length; i++) {
			if (i == 0) {
				filterstring = "ID eq " + cantinas[i];
			}
			else {
				filterstring += " or ID eq " + cantinas[i]
			}
		}
		return Menus.callWebservice("Meals", filterString);
	},
	
	
	getSides: function(cantinas) {
		//see above function for filterstuff
		return Menus.callWebservice("Sides", filterString);
	},
	
	getAdditives: function(meals, sides) {
		for (var i = 0; i < meals.length; i++) {
			if (i == 0 && !meals) {
				filterstring = "ID eq " + meals[i];
			}
			else {
				filterstring += " or ID eq " + meals[i]
			}
		}
		
		for (var i = 0; i < sides.length; i++) {
			if (i == 0 && !sides) {
				filterstring = "ID eq " + sides[i];
			}
			else {
				filterstring += " or ID eq " + sides[i]
			}
		}
		return Menus.callWebservice("Additives", "");
	}
	Init: function() {
		//this totally does not work at all, but you get the idea what I want to do
		Menus.getCantinas()
			   .when(Menus.getMeals(cantinas), Menus.getSides(cantinas))
			     .then(Menus.getAdditives(meals, sides)
			       .done(function(cantinas, meals, sides, additives){
				     Menus.cantinas = cantinas;
					 Menus.meals = meals;
					 Menus.sides = sides;
					 Menus.additives = additives;
					 
					 //... some html stuff to build the menus
				   });
	}
}
Menus.Init()

我希望我有意义吗？如何利用承诺和级联参数从一个到另一个，基本上如何使上述声明工作，并让我多个菜单与多餐，边和添加剂。

I hope I am making sense? How to make use of promises and cascade parameters from one to the next and basically how to make the above statement work and get me my multiple menus with multiple meals, sides and additives.

推荐答案

喜欢评论说 $。当是免费功能时如果我们使用然后能够链接，我们可以在这里获得非常干净的语法。

Like the comments said $.when is a free function. If we use thenable chaining we can get pretty clean syntax here.

Menus.getCantinas().then(function(cantinas){ // `then` is how we chain promises
    Menus.cantinas = cantinas;
    // if we need to aggregate more than one promise, we `$.when`
    return $.when(Menus.getMeals(cantinas), Menus.getSides(cantinas));
}).then(function(meals, sides){ // in jQuery `then` can take multiple arguments
    Menus.sides = sides; // we can fill closure arguments here
    Menus.meals = meals;
    return Menus.getAdditives(meals, sides); // again we chain
}).then(function(additives){
    Menus.additives = additives;
    return Menus; // we can also return non promises and chain on them if we want
}).done(function(){ // done terminates a chain generally.
     // edit HTML here
});

这篇关于jQuery链接和级联然后是什么时候的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！