异步队列模块用于异步任务和回调函数的解耦,为ajax模块,队列模块提供基础功能。
jQuery.ajax()负责创建异步队列,发送ajax请求,解析响应内容,回调交由异步队列管理。当ajax()请求成功、失败、完成时,将根据响应状态和解析结果,调用一部队列上相应的方法。
异步队列模块包括三部分:1 jQuery.callbacks() 回调函数列表 2 jQuery.Defferred 异步队列 3 jQuery.when。
1 jQuery.callbacks() 回调函数列表
1.1 支持的参数
参数: 参数为空时,可以被触发多次。
function f1(value) {
console.log("函数1"+value);
}
function f2(value) {
console.log("函数2"+value);
}
var callbacks=$.Callbacks();
callbacks.add(f1);
callbacks.fire("执行1");//函数1执行
callbacks.add(f2);
console.log(callbacks);
callbacks.fire("执行2");//函数1执行2 函数2执行2
参数: 参数为once时,回调函数列表只会被触发一次。
var callbacks=$.Callbacks("once");
callbacks.add(f1);
callbacks.fire("执行1");//函数1执行
callbacks.add(f2);
callbacks.fire("执行2");//不执行 这个回调列表只执行一次
参数: 参数为memory时,后面添加的函数也会被添加并执行。
var callbacks=$.Callbacks("memory");
callbacks.add(f1);
callbacks.fire("执行1");//函数1执行1 函数2执行1
// 后面添加的函数也会执行
callbacks.add(f2);
callbacks.fire("执行2");//函数1执行2 函数2执行2
参数: 参数为unique时,一个回调函数只能添加一次。
参数: 参数为stopOnFalse时,某个函数返回false时中断执行。
1.2 回调函数列表含有的方法
- .add() 添加一个或一组到回调函数列表中
- .remove() 移除一个或一组回调函数
- fire() 触发回调函数列表中的所有函数
- empty() 移除所有回调函数
- disable() 禁用回调函数列表(阻止fire和add)
- lock() 锁定回调函数列表(阻止fire)
- fireWith() 指定上下文触发所有回调函数
- has() 指定回调函数是否在列表中
- disabled() 是否禁用
- locked()是否锁定
- fired() 是否触发过
2 jQuery.Deferred() 异步队列
事实上jQuery中的Ajax就是一个异步队列。
执行过程:
①创建成功、失败、消息回调函数列表
②设定初始状态
③ 创建异步队列只读副本promise,包括:
done()添加函数到成功回调函数列表
fail()添加函数到失败回调函数列表
progress()添加函数到消息回调函数列表
state() Deferred对象的当前状态
then() 同时添加成功、失败、消息函数
alway() 将函数添加到成功和失败回调函数列表
promise() 返回当前异步队列的只读副本,或者为一个普通js对象增加只读副本中的方法并返回。
④创建异步队列
把上一步只读副本中的方法添加到异步队列中
再添加触发成功、失败、消息回调函数的方法 例如:resolve() reject() notify()等
⑤ 如果传入函数,则调用
⑥ 返回异步队列
$.get("data.php")
.done(function (data) {console.log(data);})//模拟数据
.fail(function (data) {console.log("获取失败");});
console.log($.get("data.php").state());//pending
3 jQuery.when()
当传入多个异步队列时,所有的队列时成功状态就执行成功回调,如果出现失败执行失败回调。
$.when($.get("data.php?my=1"),$.get("data.php?my=2"),$.get("data.php?my=3"))
.done(function () {
console.log("成功");
}).fail(function () {
console.log("失败")
});
4 异步队列在jQuery中的应用
- promise() 返回一个异步队列的只读副本。
- jQuery.ajax() 内部创建异步队列,最后返回异步队列的只读副本。
- ready事件 内部创建一个回调函数列表存放ready监听函数,当触发时,调用fireWith()触发ready事件。
网友评论