javascript中的排序函数调用 – 回调是唯一的方法吗？

我通过这样的各种线程阅读了例如。

但它真的让我无法完成以下任务：

我有4个function，希望它们按顺序依次发生。 请注意它们的顺序不正确，以便了解我的观点。 我想要输出“1,2,3,4”的结果

function firstFunction(){ // some very time consuming asynchronous code... console.log('1'); } function thirdFunction(){ // definitely dont wanna do this until secondFunction is finished console.log('3'); } function secondFunction(){ // waits for firstFunction to be completed console.log('2'); } function fourthFunction(){ // last function, not executed until the other 3 are done. console.log('4'); } 

我试图找出回调，但我迷路了:(

有没有一些简单的方法来做到这一点？ 就像在数组中循环一样……

Answer 1

这是一个很好的机会开始使用jQuery Deferred 。

除了基于回调的解决方案之外，代码还具有可读性，灵活性和高度可维护性

http://jsfiddle.net/zerkms/zJhph/

 function firstFunction(){ var d = $.Deferred(); // some very time consuming asynchronous code... setTimeout(function() { console.log('1'); d.resolve(); }, 1000); return d.promise(); } function thirdFunction(){ var d = $.Deferred(); // definitely dont wanna do this until secondFunction is finished setTimeout(function() { console.log('3'); d.resolve(); }, 1000); return d.promise(); } function secondFunction(){ var d = $.Deferred(); setTimeout(function() { console.log('2'); d.resolve(); }, 1000); return d.promise(); } function fourthFunction(){ var d = $.Deferred(); // last function, not executed until the other 3 are done. setTimeout(function() { console.log('4'); d.resolve(); }, 1000); return d.promise(); } firstFunction().pipe(secondFunction).pipe(thirdFunction).pipe(fourthFunction);​ 

PS：作为异步代码的一个例子，我使用了setTimeout 。 最重要的是，在异步部分的末尾，您需要调用d.resolve()来继续链接方法。

进一步阅读： http ： //joseoncode.com/2011/09/26/a-walkthrough-jquery-deferred-and-promise/

Answer 2

这个想法是你做了类似下面这样的事情，这样一旦第一个函数运行完毕，就会知道要运行什么，而不是你必须在函数外部自己解决它：

 function firstFunction(callback){ // some very time consuming asynchronous code... console.log('1'); return callback(function(){ alert("Second function finished."); return true; }); } function secondFunction(callback){ // waits for firstFunction to be completed console.log('2'); return callback(); } firstFunction(secondFunction); 

还要查找.apply()和.apply() .call() 。

Answer 3

如果我使用回调，我的工作解决方案现在看起来像这样：

  one(two); function one(callb){ console.log('1'); callb(three); } function four(){ console.log('4'); } function two(callb){ console.log('2'); callb(four); } function three(callb){ console.log('3'); callb(); } 

我发现这很可怕。 如果有超过2-3个序列，我该如何跟踪这些东西呢？ 不寒而栗…

Answer 4

已经有一段时间了，我注意到jquery文档中的deferreds ，特别是when核心API函数。

 $.when( $.ajax("test.aspx") ).then(function(ajaxArgs){ alert(ajaxArgs[1]); /* ajaxArgs is [ "success", statusText, jqXHR ] */ }); 

代码示例取自http://jqapi.com/#p=jQuery.when

Answer 5

我玩过Promise，Sequence，Exception，Callback来理解它是如何工作的，最后制作了这段代码。

使用回调调用函数并将结果作为参数依次发送到另一个函数并具有catch错误。

 function firstFunction(par) { return new Promise(function (resolve, reject) { console.log("start " + par); setTimeout(function (par) { console.log(par); resolve(par + 1); }, 1000, par); }); } function secondFunction(par) { return new Promise(function (resolve, reject) { console.log("start " + par); setTimeout(function (par) { console.log(par); try{ throw "Let's make an error..."; } catch(err) { reject(err); } resolve(par + 1); }, 1000, par); }) } function thirdFunction(par) { return new Promise(function (resolve, reject) { console.log("start " + par); setTimeout(function (par) { console.log(par); resolve(par + 1); }, 1000, par); }); } function CatchError(error) { console.log("Exception: " + error); } //Break all chain in second function function ChainBrake() { firstFunction(1) .then(secondFunction) .then(thirdFunction) .catch(CatchError); } //Log error and continue executing chain function ChainContinue() { firstFunction(1) .catch(CatchError) .then(secondFunction) .catch(CatchError) .then(thirdFunction) .catch(CatchError); }