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'); }
我试图找出回调,但我迷路了:(
有没有一些简单的方法来做到这一点? 就像在数组中循环一样……
这是一个很好的机会开始使用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/
这个想法是你做了类似下面这样的事情,这样一旦第一个函数运行完毕,就会知道要运行什么,而不是你必须在函数外部自己解决它:
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()
。
如果我使用回调,我的工作解决方案现在看起来像这样:
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个序列,我该如何跟踪这些东西呢? 不寒而栗…
已经有一段时间了,我注意到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
我玩过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); }