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

类结构
首先我们来搭一个架子,把需要用到的似有变量都列出来。我们需要一个数组,来保存回调函数列表;需要一个标志位,来表示异步操作是否已完成;还可以学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风格的链式写法呢?这是我们接下来要思考的问题,如果你不希望错过相关讨论的话

(0)

相关推荐

  • JavaScript 异步调用框架 (Part 4 - 链式调用)

    现实开发中,要按顺序执行一系列的同步异步操作又是很常见的.还是用百度Hi网页版中的例子,我们先要异步获取联系人列表,然后再异步获取每一个联系人的具体信息,而且后者是分页获取的,每次请求发送10个联系人的名称然后取回对应的具体信息.这就是多个需要顺序执行的异步请求. 为此,我们需要设计一种新的操作方式来优化代码可读性,让顺序异步操作代码看起来和传统的顺序同步操作代码一样优雅. 传统做法 大多数程序员都能够很好的理解顺序执行的代码,例如这样子的: 复制代码 代码如下: var firstResult

  • JavaScript 异步调用框架 (Part 6 - 实例 & 模式)

    封装Ajax 设计Async.Operation的最初目的就是解决Ajax调用需要传递callback参数的问题,为此我们先把Ajax请求封装为Async.Operation.我在这里使用的是jQuery,当然无论你用什么基础库,在使用Async.Operation时都可以做这种简单的封装. 复制代码 代码如下: var Ajax = {}; Ajax.get = function(url, data) { var operation = new Async.Operation(); $.get

  • JavaScript 异步调用框架 (Part 5 - 链式实现)

    调用入口 链式调用存在Async.go方法和Async.chain方法两个入口,这两个入口本质上是一致的,只是Async.chain方法在调用时先不提供初始参数,而Async.go方法在调用时提供了初始参数并启动异步调用链. 复制代码 代码如下: Async.chain = function() { var chain = new Async.Operation({ chain: true }); return chain; }; Async.go = function(initialArgum

  • JavaScript 异步调用框架 (Part 1 - 问题 & 场景)

    问题 在Ajax应用中,调用XMLHttpRequest是很常见的情况.特别是以客户端为中心的Ajax应用,各种需要从服务器端获取数据的操作都通过XHR异步调用完成.然而在单线程的JavaScript编程中,XHR异步调用的代码风格实在是与一般的JavaScript代码格格不入. 额外参数 考虑一个除法函数,如果它是纯客户端的同步函数,那么签名会是这样的: function divide(operand1, operand2) 然而假设我们对客户端除法的精度不满意,于是把除法转移到服务器端来执行

  • JavaScript异步调用定时方法并停止该方法实现代码

    复制代码 代码如下: (function() { var t = window.setInterval(function() { $('#ajaxGame').load('RefreshCurrentPlayerServlet #ajaxGame', function() { youWin(); youlose(); }); }, 10000); function youWin() { if ($('#status:contains("YOU ARE THE WINNER!")').l

  • javascript 支持链式调用的异步调用框架Async.Operation

    复制代码 代码如下: Async = {}; Async.Operation = function(options) { options = options || {}; var callbackQueue = []; var chain = (options.chain && options.chain === true) ? true : false; var started = false; var innerChain = null; this.result = undefined

  • Java多线程实现异步调用的方法

    在JAVA平台,实现异步调用的角色有如下三个角色:调用者 提货单   真实数据 一个调用者在调用耗时操作,不能立即返回数据时,先返回一个提货单.然后在过一断时间后凭提货单来获取真正的数据. 去蛋糕店买蛋糕,不需要等蛋糕做出来(假设现做要很长时间),只需要领个提货单就可以了(去干别的事情),等到蛋糕做好了,再拿提货单取蛋糕就可以了. public class Main { public static void main(String[] args) { System.out.println("ma

  • JavaScript 异步调用框架 (Part 2 - 用例设计)

    传递回调 我们首先要考虑的一个问题是,如何传递回调入口.在最传统的XHR调用当中,回调函数会被作为最后一个参数传递给异步函数: 复制代码 代码如下: function asyncOperation(argument, callback) 在参数相当多的时候,我们可以把参数放到一个JSON里面,这样参数就如同具名参数一样,可以通过参数名选择性的传递参数,不传递的参数相当于使用默认值.这是从Prototype开始就流行起来的做法: 复制代码 代码如下: function asyncOperation

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

    类结构 首先我们来搭一个架子,把需要用到的似有变量都列出来.我们需要一个数组,来保存回调函数列表:需要一个标志位,来表示异步操作是否已完成:还可以学IAsyncResult,加一个state,允许异步操作的实现者对外暴露自定义的执行状态:最后加一个变量保存异步操作结果. 复制代码 代码如下: Async = { Operation: { var callbackQueue = []; this.result = undefined; this.state = "waiting"; th

  • JavaScript 异步调用

    问题 可修改下面的 aa() 函数,目的是在一抄后用 console.log() 输出 want-value function aa() { setTimeout(function() { return "want-value"; }, 1000); } 但是,有额外要求: aa() 函数可以随意修改,但是不能有 console.log() 执行 console.log() 语句里不能有 setTimeout 包裹 解答 也许这是个面试题,管它呢.问题的主要目的是考察对异步调用执行结果

  • JavaScript异步上传图片文件的实例代码

    html: <form action="url" enctype="multipart/form-data" id="myform" method="post"> <input accept="image/*" id="addfile" type="file" /> </form> jquery: $("#addfile&

  • 关于java中@Async异步调用详细解析附代码

    目录 前言 1. @Async讲解 2. 用法 2.1 同步调用 2.2 异步调用 3. 自定义线程池 前言 异步调用与同步调用 同步调用:顺序执行,通过调用返回结果再次执行下一个调用 异步调用:通过调用,无需等待返回结果,执行下一个调用 1. @Async讲解 其@Async的注解代码如下: @Target({ElementType.TYPE, ElementType.METHOD}) @Retention(RetentionPolicy.RUNTIME) @Documented public

  • SpringBoot异步调用方法实现场景代码实例

    一.背景 项目中肯定会遇到异步调用其他方法的场景,比如有个计算过程,需要计算很多个指标的值,但是每个指标计算的效率快慢不同,如果采用同步执行的方式,运行这一个过程的时间是计算所有指标的时间之和.比如: 方法A:计算指标x,指标y,指标z的值,其中计算指标x需要1s,计算指标y需要2s,指标z需要3s.最终执行完方法A就是5s. 现在用异步的方式优化一下 方法A异步调用方法B,方法C,方法D,方法B,方法C,方法D分别计算指标x,指标y,指标z的值,那么最终执行完方法A的时间则是3s. 还有一种用

随机推荐