下面我将讲解“jQuery.Callbacks()回调函数队列用法详解”的攻略。
什么是jQuery.Callbacks()?
jQuery.Callbacks()
是jQuery提供的一个回调函数队列构造函数,用于实现自定义的回调函数体系。它支持多个回调函数列表,以及控制这些回调函数列表的触发次数和所在上下文等细节。让我们逐一了解一下。
创建回调函数列表
要想使用jQuery.Callbacks()
,需要先定义一个回调函数列表。可以使用如下的语法创建:
var callbacks = $.Callbacks();
添加回调函数
在创建了回调函数列表后,就可以往里添加回调函数。添加回调函数的方式有多种,可以一个一个添加,也可以带着函数数组一次性添加。示例:
function fn1() {
console.log('fn1');
}
function fn2() {
console.log('fn2');
}
// 逐个添加回调函数
callbacks.add(fn1);
callbacks.add(fn2);
// 利用数组一次性添加多个回调函数
callbacks.add([fn1, fn2]);
可以看到,在jQuery.Callbacks()
中添加回调函数其实就是一个普通的函数调用。
触发回调函数
回调函数列表的所有函数默认是同步执行的,可以通过fire
方法来触发回调函数。而且,在之前执行fire
方法时,必须已经添加过函数。
下面的示例展示如何触发回调函数:
callbacks.fire();
// 输出:
// fn1
// fn2
可以看到,fire
方法会按添加函数的顺序依次调用回调函数列表中的各个函数。
确定上下文
要确保回调函数中this
的指向是我们期望的值,可以使用jQuery.Callbacks()
提供的context
方法。
var obj = {
name: 'obj',
callback: function() {
console.log(this.name);
}
};
callbacks.add(obj.callback);
callbacks.fireWith(obj);
// 输出:obj
这里使用了fireWith
方法来指定回调函数中的this
指向obj
对象。
控制回调函数的执行
可以使用jQuery.Callbacks()
提供的以下方法来控制回调函数的执行:
once()
在第一个回调执行之后,就移除回调函数列表中的所有回调函数。
callbacks.add(fn1);
callbacks.addOnce(fn2);
callbacks.fire();
callbacks.fire();
// 输出:
// fn1
// fn2
// fn1
// (第二轮执行里不包括fn2了)
可以看到,使用addOnce
添加的回调函数只会在第一次执行时被调用。
memory
把最近一次fire
触发的回调函数列表缓存下来,在下一次添加回调函数时,立即调用之前缓存的回调。
var callbacks = $.Callbacks('memory');
callbacks.add(fn1);
callbacks.fire();
callbacks.add(fn2); // 这里会立即调用fn2
由于开启了memory
缓存,fn2
会在添加时立即被调用。
stopOnFalse
只要有一个回调返回false
,就停止执行后续的回调。下面的示例演示了可传递参数的用法:
callbacks.add(function() {
console.log('step1');
return false;
});
callbacks.add(function() {
console.log('step2');
});
callbacks.fire('trigger');
// 输出:
// step1
callbacks.empty();
callbacks.add(function() {
console.log('step1');
return 'not false';
});
callbacks.add(function() {
console.log('step2');
});
callbacks.fire('trigger');
// 输出:
// step1
// step2
第一个执行结果,step1
执行后,就停止了后续的回调。接下来的第二个执行结果,则没有出现停止后续回调的现象,因为step1
返回的是一个非false
的结果。
总结
jQuery.Callbacks()
是一种很方便的回调函数队列实现方法,不仅可以用于事件绑定的底层代码实现,也可以适用于大多数自定义的回调函数应用场景。
以上就是本次攻略的全部内容。希望对您有帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:jQuery.Callbacks()回调函数队列用法详解 - Python技术站