当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript 异步调用框架 (Part 3 - 代码实现)

Javascript
有趣的script标签用getAttribute方法来自脚本吧
学习YUI.Ext 第二天
学习YUI.Ext 第三天
学习YUI.Ext第五日--做拖放Darg&Drop
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
学习YUI.Ext 第七天--关于View&JSONView
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
对YUI扩展的Gird组件 Part-2
Gird事件机制初级读本
为Yahoo! UI Extensions Grid增加内置的可编辑器
如何简单地用YUI做JavaScript动画
(function(){})()的用法与优点
JS层移支示例代码
如何在Web页面上直接打开、编辑、创建Office文档
网页中实现浏览器的最大，最小化和关闭按钮
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
图片自动缩小的js代码,用以防止图片撑破页面
收藏一些不常用，但是有用的代码
解决 firefox 不支持 document.all的方法
用ajax实现的自动投票的代码

No. « 55 56 57 58 »

技术文章搜索

关键字

Javascript 中的 JavaScript 异步调用框架 (Part 3 - 代码实现)

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-12   浏览: 388 ::
收藏到网摘: n/a

在上一篇文章里，我们说到了要实现一个Async.Operation类，通过addCallback方法传递回调函数，并且通过yield方法返回回调结果。现在我们就来实现这个类吧。 类结构
首先我们来搭一个架子，把需要用到的似有变量都列出来。我们需要一个数组，来保存回调函数列表；需要一个标志位，来表示异步操作是否已完成；还可以学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风格的链式写法呢？这是我们接下来要思考的问题，如果你不希望错过相关讨论的话