类结构 首先我们来搭一个架子，把需要用到的似有变量都列出来。我们需要一个数组，来保存回调函数列表；需要一个标志位，来表示异步操作是否已完成；还可以学IAsyncResult，加一个state，允许异步操作的实现者对外暴露自定义的执行状态；最后加一个变量保存异步操作结果。 复制代码 代码如下: Async = { Operation: { var callbackQueue = []; this.result = undefined; this.state = "waiting"; this.completed = false; } } addCallback方法 接下来，我们要实现addCallback方法，它的工作职责很简单，就是把回调函数放到callbackQueue中。此外，如果此时completed为true，说明异步操作已经yield过了，则立即调用此回调。 复制代码 代码如下: this.yield = function(callback) { callbackQueue.push(callback); if (this.completed) { this.yield(this.result); } return this; } 我们假设yield方法会把callbackQueue中的回调函数逐个取出来然后调用，因此如果compeleted为true，则使用已有的result再调用一次yield就可以了，这样yield自然会调用这次添加到callbackQueue的回调函数。 至于最后的return this;，只是为了方便jQuery风格的链式写法，可以通过点号分隔连续添加多个回调函数： 复制代码 代码如下: asyncOperation(argument) .addCallback(firstCallback) .addCallback(secondCallback); yield方法 最后，我们要实现yield方法。它需要将callbackQueue中的回调函数逐个取出来，然后都调用一遍，并且保证这个操作是异步吧。 复制代码 代码如下: this.yield = function(result) { var self = this; setTimeout(function() { self.result = result; self.state = "completed"; self.completed = true; while (callbackQueue.length > 0) { var callback = callbackQueue.shift(); callback(self.result); } }, 1); return this; } 通过使用setTimeout，我们确保了yield的实际操作是异步进行的。然后我们把用户传入yield的结果及相关状态更新到对象属性之上，最后遍历callbackQueue调用所有的回调函数。 小结 这样我们就做好了一个简单的JavaScript异步调用框架，完整的代码可以看这里：异步调用框架Async.Operation。 这个框架能够很好的解决调用栈中出现同步异步操作并存的情况，假设所有函数都返回Async.Operation，框架的使用者可以使用一种统一的模式来编写代码，处理函数返回，而无需关心这个函数实际上是同步返回了还是异步返回了。 对于串行调用多个异步函数的情况，我们现在可以用嵌套addCallback的方式来书写，但随着嵌套层数的增多，代码会变得越来越不美观： 复制代码 代码如下: firstAsyncOperation().addCallback(function() { secondAsyncOperation().addCallback(function() { thirdAsyncOperation().addCallback(function() { finalSyncOperation(); }); }); }); 我们能否把嵌套形式改为jQuery风格的链式写法呢？这是我们接下来要思考的问题，如果你不希望错过相关讨论的话

　　推荐阅读

　　Extjs ajax同步请求时post方式参数发送方式

ajax同步请求一般下面这样： 复制代码 代码如下: var conn = Ext.lib.Ajax.getConnectionObject().conn; conn.open("POST", 'http://localhost:8080/struts2study/TreeDDGet?node=-1',false); // 这里的conn对象其>>>详细阅读

本文标题：JavaScript 异步调用框架 (Part 3 - 代码实现)

地址：http://www.17bianji.com/kaifa2/JS/28296.html

 1/2    1