javascript 如何避免回调链？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5230333/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to avoid callback chains?
提问by ezmilhouse
I need a bunch of functions to be called in strict order. It's also very important that the next function waits until the previous one has finished.
我需要按严格顺序调用一堆函数。下一个函数要等到前一个函数完成，这一点也很重要。
Right now I'm using chained callbacks:
现在我正在使用链式回调：
callMe1(function(){
callMe2(function(){
callMe3(function(){
callMeFinal();
});
});
});
This works but seems to be a little ugly.
这有效，但似乎有点难看。
Any suggestions for a different approach?
对不同方法的任何建议？
回答by Felix Kling
回答by The Scrum Meister
You can implement a "stack" system:
您可以实现一个“堆栈”系统：
var calls = [];
function executeNext(next) {
if(calls.length == 0) return;
var fnc = calls.pop();
fnc();
if(next) {
executeNext(true);
}
}
/*To call method chain synchronously*/
calls.push(callMe3);
calls.push(callMe2);
calls.push(callMe1);
executeNext(true);
/*To call method chain asynchronously*/
calls.push(callMe3);
calls.push(function(){
callMe2();
executeNext(false);
});
calls.push(function(){
callMe1();
executeNext(false);
});
回答by gnarf
Not sure if this would help you, but there is a great article on using deferreds in jQuery 1.5. It might clean up your chain a bit...
不确定这是否对您有帮助，但是有一篇关于在 jQuery 1.5 中使用延迟的很棒的文章。它可能会稍微清理你的链条......
Also, my answer on Can somebody explain jQuery queue to mehas some examples of using a queue for ensuring sequential calls.
另外，我在Can 有人向我解释 jQuery 队列的回答中有一些使用队列来确保顺序调用的示例。
回答by jhon smith optional
You might want to pass parameters to the functions, I do not believe you can at the time of this writing. However...
您可能想要将参数传递给函数，我认为在撰写本文时您还不能。然而...
function callMe1(next) {
console.log(this.x);
console.log("arguments=");
console.log(arguments);
console.log("/funct 1");
this.x++;
next();
}
function callMe2(next) {
console.log(this.x);
console.log("arguments=");
console.log(arguments);
console.log("/funct 2");
this.x++;
next();
}
function callMe3(next) {
console.log(this.x);
console.log("arguments=");
console.log(arguments);
console.log("/funct 3");
this.x++;
next();
}
var someObject = ({x:1});
$(someObject).queue(callMe1).queue(callMe2).queue(callMe3);
回答by JosephSlote
Wrapping your functions, arguments intact, with an anonymous function that plays along with .queueworks too.
用一个匿名函数包装你的函数，完整的参数，也可以一起.queue工作。
Passing Arguments in Jquery.Queue()
在 Jquery.Queue() 中传递参数
var logger = function(str, callback){
console.log(str);
//anything can go in here, but here's a timer to demonstrate async
window.setTimeout(callback,1000)
}
$(document)
.queue(function(next){logger("Hi",next);})
.queue(function(next){logger("there,",next);})
.queue(function(next){logger("home",next);})
.queue(function(next){logger("planet!",next);});
Example on JSFiddle: http://jsfiddle.net/rS4y4/
JSFiddle 示例：http: //jsfiddle.net/rS4y4/
