如何避免回调链？

我需要严格按顺序调用一堆函数。 下一个函数在前一个函数完成之前等待也是非常重要的。

现在我正在使用链式回调：

callMe1(function(){ callMe2(function(){ callMe3(function(){ callMeFinal(); }); }); }); 

这有效，但似乎有点难看。

对于不同方法的任何建议？

Answer 1

如果使用jQuery，则可以使用queue来链接函数。

 $(document) .queue(callMe1) .queue(callMe2); 

callMeX应该是这样的forms：

 function callMeX(next) { // do stuff next(); } 

Answer 2

您可以实现“堆栈”系统：

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

Answer 3

不确定这是否对你有所帮助，但有一篇关于在jQuery 1.5中使用deferreds的文章。 它可能会清理你的链条……

另外，我的答案可以解释jQuery队列给我一些使用队列来确保顺序调用的例子。

Answer 4

您可能希望将参数传递给函数，我不相信您在撰写本文时可以。 然而…

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

Answer 5

使用与.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);}); 

关于JSFiddle的例子： http ： //jsfiddle.net/rS4y4/