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


Posted in Javascript onAugust 04, 2009

类结构
首先我们来搭一个架子,把需要用到的似有变量都列出来。我们需要一个数组,来保存回调函数列表;需要一个标志位,来表示异步操作是否已完成;还可以学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风格的链式写法呢?这是我们接下来要思考的问题,如果你不希望错过相关讨论的话
Javascript 相关文章推荐
用JavaScript事件串连执行多个处理过程的方法
Mar 09 Javascript
一款JavaScript压缩工具:X2JSCompactor
Jun 13 Javascript
javascript 通用简单的table选项卡实现
May 07 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 Javascript
微信小程序之蓝牙的链接
Sep 26 Javascript
详解ECMAScript typeof用法
Jul 25 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
Oct 08 Javascript
angularjs请求数据的方法示例
Aug 06 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
JavaScript点击按钮生成4位随机验证码
Jan 28 Javascript
JavaScript 异步调用框架 (Part 2 - 用例设计)
Aug 03 #Javascript
JavaScript 异步调用框架 (Part 1 - 问题 & 场景)
Aug 03 #Javascript
jQuery 相关控件的事件操作分解
Aug 03 #Javascript
利用javascript实现一些常用软件的下载导航
Aug 03 #Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 #Javascript
一句话JavaScript表单验证代码
Aug 02 #Javascript
JavaScript 关键字屏蔽实现函数
Aug 02 #Javascript
You might like
深入php define()函数以及defined()函数的用法详解
2013/06/05 PHP
PHP调用.NET的WebService 简单实例
2015/03/27 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
你必须知道的Javascript知识点之"单线程事件驱动"的使用
2013/04/23 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
2014/03/20 Javascript
js在IE与firefox的差异集锦
2014/11/11 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
JS动态添加选项案例分析
2016/10/17 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
python实现读取命令行参数的方法
2015/05/22 Python
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
Python入门_条件控制(详解)
2017/05/16 Python
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
python爬虫爬取淘宝商品信息
2018/02/23 Python
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
Python中出现IndentationError:unindent does not match any outer indentation level错误的解决方法
2020/04/18 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
Flask框架学习笔记之消息提示与异常处理操作详解
2019/08/15 Python
Python @property原理解析和用法实例
2020/02/11 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
大学生党员自我批评
2014/02/14 职场文书
听课评语大全
2014/04/30 职场文书
临床专业自荐信
2014/06/22 职场文书
财务经理岗位职责
2015/01/31 职场文书
2015年中秋节活动总结
2015/03/23 职场文书