异步队列 Deferred
异步队列 Deferred
背景:
移动web app开发,异步代码是时常的事,比如有常见的异步操作:
- Ajax(XMLHttpRequest)
- Image Tag,Script Tag,iframe(原理类似)
- setTimeout/setInterval
- CSS3 Transition/Animation
- HTML5 Web Database
- postMessage
- Web Workers
- Web Sockets
- and more…
后面几个是CSS3 HML5加入的新API.这些接口都是会产生异步的操作
比如本人的一个phonegap项目,操作HTML5本地数据库(HTML5 Web Database)就是一个异步的过程,如果同时执行多个查询,势必同步代码要等待数据查询结束后调用
附项目源码:执行多次异步查询
/**
* 初始化操作
* @return
*/
proto.initProcess =
function
(){
var
self =
this
,
prev =
null
,
curr =
null
,
next =
null
;
debug.group(
"start of init process"
);
var
idx = self.chapterIndex;
debug.info(
"PageBase: 执行初始化之前的操作!"
);
self.initProcessBefore();
if
(idx == 0){
debug.info(
"PageBase: 初始化入口点从第一章开始进入"
);
debug.info(
"PageBase: 解析器解析第一章数据!"
);
curr = self.process(self.chapters[idx]);
curr.then(
function
(pages){
debug.info(self.format(
"PageBase: 第一章数据解析完成,解析页面数为{0}"
, pages.length));
self.cPages = pages;
if
(self.isChangeFont){
self.idx = Math.ceil((pages.length - 1) * self.idx);
}
self.cPages.idx = idx;
/////////////////////////////////////////////////
//
// 2013.1.10修改
// 如果只有一个章节的情况下
//
if
(1 === self.chapters.length){
deferred.all([curr]).then(self.steup.bind(self));
}
else
{
debug.info(
"PageBase:解析器解析后一章数据!"
);
next = self.loadNextData(idx + 1);
next.then(
function
(args){
debug.info(self.format(
"PageBase: 后一章数据解析完成,解析页面数为{0}"
, args.pages.length));
self.nPages = args.pages;
self.nPages.idx = idx + args.index;
debug.info(self.format(
"PageBase: 初始化数据解析完成, 当章索引{0} 当章页数{1} 下章索引{2} 下章页数{3}"
, self.cPages.idx , self.cPages.length , self.nPages.idx , self.nPages.length));
debug.info(
"PageBase: 初始化数据解析完成,即将生成结构操作!"
);
});
deferred.all([curr , next]).then(self.steup.bind(self));
}
});
}
else
if
(idx == self.chapters.length -1){
debug.info(
"PageBase: 初始化入口点从最后一章开始进入"
);
debug.info(
"PageBase:解析器解析最后一章数据!"
);
prev = self.loadPrevData(idx - 1);
prev.then(
function
(args){
self.pPages = args.pages;
self.pPages.idx = args.index + 1;
debug.info(self.format(
"PageBase: 最后一章的前一章数据解析完成,解析页面数为{0}"
, args.pages.length));
curr = self.process(self.chapters[idx]);
curr.then(
function
(pages , data){
if
(self.isChangeFont){
self.idx = Math.ceil((pages.length - 1) * self.idx);
}
self.cPages = pages ;
self.cPages.idx = idx;
debug.info(self.format(
"PageBase: 最后一章数据解析完成,解析页面数为{0}"
, pages.length));
debug.info(self.format(
"PageBase: 初始化数据解析完成, 前章索引{0} 前章页数{1} 当章索引{2} 当章页数{3} "
, self.pPages.idx , self.pPages.length , self.cPages.idx , self.cPages.length ));
debug.info(
"PageBase: 初始化数据解析完成,即将生成结构操作!"
);
});
deferred.all([prev , curr]).then(self.steup.bind(self));
});
}
else
{
debug.info(
"PageBase: 初始化入口点从中间章开始进入"
);
prev = self.loadPrevData(idx - 1);
debug.info(
"PageBase:解析器解析中间章的前一章数据!"
);
prev.then(
function
(args){
self.pPages = args.pages ;
self.pPages.idx = args.index;
debug.info(self.format(
"PageBase: 中间章前一章数据解析完成,解析页面数为{0}"
, args.pages.length));
debug.info(
"PageBase:解析器解析中间章数据!"
);
curr = self.process(self.chapters[idx]);
curr.then(
function
(pages , data){
if
(self.isChangeFont){
self.idx = Math.ceil((pages.length) * self.idx);
// console.log("spages.length - 1",pages.length)
// console.log("self.idx",self.idx)
}
self.cPages = pages ;
self.cPages.idx = idx;
debug.info(self.format(
"PageBase: 中间章数据解析完成,解析页面数为{0}"
,pages.length));
debug.info(
"PageBase:解析器解析中间章的后一章数据!"
);
next = self.loadNextData(idx + 1);
next.then(
function
(args){
self.nPages = args.pages ;
self.nPages.idx = idx + args.index;
debug.info(self.format(
"PageBase: 中间章后一章数据解析完成,解析页面数为{0}"
, args.pages.length));
debug.info(self.format(
"PageBase: 初始化数据解析完成, 前章索引{0} 前章页数{1} 当章索引{2} 当章页数{3} 下章索引{4} 下章页数{5}"
, self.pPages.idx , self.pPages.length , self.cPages.idx , self.cPages.length , self.nPages.idx , self.nPages.length));
debug.info(
"PageBase: 初始化数据解析完成,即将生成结构操作!"
)
});
deferred.all([prev , curr , next]).then(self.steup.bind(self));
});
});
}
如何组织代码
但是对于异步+回调的模式,当需要对一系列异步操作进行流程控制的时候似乎必然会面临着回调嵌套。因此怎么把异步操作“拉平”,用更好的方法去优化异步编程的体验,同时也写出更健壮的异步代码,是这两年来前端圈子里很火的话题。
代表的
- 消息驱动——代表:@朴灵 的EventProxy
- Promise模式——代表:CommonJS Promises,jQuery,Dojo
- 二次编译——代表:@老赵 的Jscex
- jQuery 是唯一的实现了这种 when 方法的库。其他的 promises 库,例如 Q, Dojo, 和 when 依照 Promises/B spec 实现了 when 方法, 但是并没有实现注释者提及的 when 方法。但是,Q 库有一个 all方法,when.js 也有一个 parallel方法,与上面的 jQuery.when 方法作用一样,只是它们接受一个数组类型的参数,而不是任意数量的参数。
回顾Jquery Deferred
- 从1.5版本开始,jQuery加入了Deferred功能,让事件处理队列更加的完善。并用 这个机制重写了Ajax模块。虽然还没轮到Ajax,但是接下来的事件处理函数中牵扯到了 这个机制
- Deferred把回调函数注册到一个队列中,统一管理,并且可以同步或者异步地调用 这些函数。jQuery.Deferred()用来构造一个Deferred对象。该对象有状态值,共有三种: Rejected, Resolved和初始状态。其中Resolved表示该操作成功完成了,而Rejected 则表示出现了错误,调用失败。Deferred对象的主要成员如下:
- done(callback): 注册一个callback函数,当状态为resolved时被调用。
- fail(callback): 注册一个callback函数,当状态为rejected时被调用。
- always(callback): 注册一个callback函数,无论是resolved或者rejected都会被 调用。
- then(successCallback, failureCallback): 同时传入成功和失败的回调函数。
- pipe(successFilter, failureFilter): 在调用成功和失败的回调函数前先调用pipe 指定的函数。算是一种管道机制,拦截了函数调用。
- resolve(args): 把状态设置为Resolved。
- reject(args): 把状态设置为Rejected。
- promse(): 返回的是一个不完整的Deferred的接口,没有resolve和reject。即不能 修改Deferred对象的状态。可以看作是一种只读视图。这是为了不让外部函数提早触发 回调函数。比如$.ajax在1.5版本后不再返回XMLHttpRequest,而是返回一个封装了 XMLHttpRequest和Deferred对象接口的object。其中Deferred部分就是promise()得到 的,这样不让外部函数调用resolve和reject,防止在ajax完成前触发回调函数。把这 两个函数的调用权限保留给ajax内部。
deferred-js
本人在项目中使用 Promise/A 规范实现的 deferred-js , 比较简单轻巧.
如何使用?
API:
var DeferredAPI = { deferred : deferred, all : all, Deferred : Deferred, DeferredList : DeferredList, wrapResult : wrapResult, wrapFailure : wrapFailure, Failure : Failure } |
最简单常用的案例
//Deferred对象创建
var d = new deferred.Deferred() //添加一个回调到递延的回调链
d.then(function(result) {
console.log('Hello ' + result)
return result
}) //等待回调后触发
d.resolve('World')
每个链接在一个回调链可以是两个函数,代表一个成功,一个失败
只有一个成功回调
d.then(function(result) {
// 自己的代码
return result
})
失败回调
d.fail(function(failure) {
// optionally do something useful with failure.value()
return failure
});
添加一个成功方法和一个失败方法
d.then(function(result) {
// do something useful with the result
return result
}, function(failure) {
// optionally do something useful with failure.value()
return failure
})
不管回调成功或者失败都执行同一份代码
d.both(function(result) {
// in the case of failure, result is a Failure
// do something in either case
return result
})
如果许多异步在操作,比如提供的案例,在要执行HTML5数据库N次后,如何操作呢?
请仔细对照下案例中的
deferred.all([prev , curr , next]).then(self.steup.bind(self));
all的方法等待所有的延时队列加载完毕后,才执行后续代码
使用起来很方便,很精简没有那么多复杂的概念
使用教程之后,下一节附源码的实现
异步队列 Deferred的更多相关文章
- 移动web app开发必备 - 异步队列 Deferred
背景 移动web app开发,异步代码是时常的事,比如有常见的异步操作: Ajax(XMLHttpRequest) Image Tag,Script Tag,iframe(原理类似) setTimeo ...
- jQuery源码分析(九) 异步队列模块 Deferred 详解
deferred对象就是jQuery的回调函数解决方案,它解决了如何处理耗时操作的问题,比如一些Ajax操作,动画操作等.(P.s:紧跟上一节:https://www.cnblogs.com/grea ...
- jQuery 源码解析(八) 异步队列模块 Callbacks 回调函数详解
异步队列用于实现异步任务和回调函数的解耦,为ajax模块.队列模块.ready事件提供基础功能,包含三个部分:Query.Callbacks(flags).jQuery.Deferred(funct) ...
- .Net中的并行编程-4.实现高性能异步队列
上文<.Net中的并行编程-3.ConcurrentQueue实现与分析>分析了ConcurrentQueue的实现,本章就基于ConcurrentQueue实现一个高性能的异步队列,该队 ...
- jquery ajax 对异步队列defer与XMLHttprequest.onload的依赖
ajax 对异步队列defer与XMLHttprequest.onload的依赖
- [js高手之路]javascript腾讯面试题学习封装一个简易的异步队列
这道js的面试题,是这样的,页面上有一个按钮,一个ul,点击按钮的时候,每隔1秒钟向ul的后面追加一个li, 一共追加10个,li的内容从0开始技术( 0, 1, 2, ....9 ),首先我们用闭包 ...
- .Net中的并行编程-7.基于BlockingCollection实现高性能异步队列
三年前写过基于ConcurrentQueue的异步队列,今天在整理代码的时候发现当时另外一种实现方式-使用BlockingCollection实现,这种方式目前依然在实际项目中使用.关于Blockin ...
- 基于异步队列的生产者消费者C#并发设计
继上文<<基于阻塞队列的生产者消费者C#并发设计>>的并发队列版本的并发设计,原文code是基于<<.Net中的并行编程-4.实现高性能异步队列>>修改 ...
- js异步队列之理解
起因 最近看到一篇关于js异步执行顺序的解答,觉得有所收获,遂记录下来. marcotask和microtask js中异步队列可以分为两类,marcotask队列和microtask队列, marc ...
随机推荐
- MVC验证03-自定义验证规则、禁止输入某些值
原文:MVC验证03-自定义验证规则.禁止输入某些值 本文继续体验自定义验证规则,需求是禁止输入某些值.本文与前2篇相关,请参考:MVC验证01-基础.远程验证 MVC验证02-自定义验证规则.邮 ...
- Web API-路由(二)
路由匹配主要有三个阶段: 1.将URI匹配到一个路由模版: 2.选择一个controller 3.选择一个action: 可以使用系统提供的拓展点,修改默认的匹配与选择逻辑规则. 路由模版: 路由 ...
- 超酷的jQuery百叶窗图片滑块实现教程
原文:超酷的jQuery百叶窗图片滑块实现教程 今天我们要来分享一款基于jQuery的百叶窗焦点图插件,也可以说是图片滑块插件.这种jQuery焦点图插件的应用非常广泛,在早些年前,我们需要用flas ...
- CodeSmith 生成代码
使用CodeSmith 生成代码 CodeSmith是一款优秀的代码生成工具.在ORM中,它能帮助我们生成实体类.XML配置文件,从而简化了我们一部分的开发工作.下面简要说说它的基本用法. 1. 打 ...
- QT Creater与libusb使用
新建一个C项目,然后修改.pro文件,添加LIBS一行 TEMPLATE = app CONFIG += console CONFIG -= app_bundle CONFIG -= qt LIBS ...
- openwrt的默认/etc/config/network文件是如何生成的?
openwrt的network文件,或者说在/etc/config下的文件,都是动态生成的. 脚本的函数定义在openwrt1407/package/base-files/files/lib/func ...
- restrict
restrict是c99标准引入的,它只可以用于限定和约束指针,并表明指针是访问一个数据对象的唯一且初始的方式.即它告诉编译器,所有修改该指针所指向内存中内容的操作都必须通过该指针来修改,而不能通过其 ...
- SQL Server 行版本控制
什么时候开启行版本? 当发现系统中存在大量读写阻塞的时候,就是我们开启行版本的时候了.要点:写写阻塞的场景行版本技术解决不了 开启方式: -- 设置为单用户 ALTER DATABASE MyTest ...
- Entity Framework,TransactionScope 混合使用的问题讨论
using (var ts = new TransactionScope()) { string connStr = "Data Source=.;Initial Catalog=Test; ...
- 获得WCF Client端的本地端口
获得WCF Client端的本地端口 最近需要做个小功能,当WCF调用远程服务时,显示该调用的网速或流量.其中比较关键的一步就是需要获得WCF Client端的本地端口,原来以为是个简单的事情,结果 ...