$.Callbacks API 比如:add | fire | fired | fireWith | has | disable | disabled | empty
程序员文章站
2022-05-30 14:18:27
...
$.Callbacks用来管理函数队列。采用了观察者模式,通过add添加操作到队列当中,通过fire去执行这些操作。实际上$.Callbacks是1.7版本从$.Deferred对象当中分离出来的,主要是实现$.Deferred功能。
$.Callbacks()详细信息,请参考:JQuery 的 Callbacks() 函数
jquery-3.3.1.js 版本的 Callbacks 主要有以下一些API.
具体API列表如下:
方法名 | 参数 | 描述 |
---|---|---|
add(callbacks) | 总有三种参数形式: 1. 单个函数参数 2. 多个函数参数 3. 数组参数 |
向内部队列添加函数 |
disable() | 无 | 禁用回调列表中的回调 |
disabled() | 无 | 回调列表是否被禁用,返回Boolean类型 |
empty() | 无 | 从列表中删除所有的回调 |
fire(arguments) | 传回给回调列表的参数或参数列表 | 依次执行列表中的所有函数 |
fireWith([context][,args]) | context: 该列表中的回调被触发的上下文引用 args: 一个参数或参数列表传回给回调列表。 |
访问给定的上下文和参数列表中的所有回调 |
fired() | 无 | 回调列表是否有执行过 |
has(callback) | 需要判断的函数 | 判断函数队列中是否存在某个函数 |
lock() | 无 | 锁定在其当前状态的回调列表 |
locked() | 无 | 回调列表是否被锁 |
remove(callbacks) | 需要删除的函数或函数数组 | 删除回调或回调列表的集合 |
Add方法实例:
1. 单个函数参数
var cb = $.Callbacks();
cb.add(function () {
console.log('add one');
});
//Using anonymous function as parameter, and the same as bellow:
function add1() {
console.log('add one');
}
cb.add(add1);
2. 多个函数参数
var cb = $.Callbacks();
cb.add(function () {
console.log('add one');
}, function () {
console.log('add two');
});
3. 数组参数
var cb = $.Callbacks();
cb.add([
function () {
console.log('add one');
}, function () {
console.log('add two');
}
]);
注意: 允许Add多个匿名函数
var cb = $.Callbacks();
cb.add(function(){console.log(1)});
cb.fire();
//1
cb.add(function(){console.log(2)});
cb.fire();
//1
//2
cb.add(function(){console.log(3)});
cb.fire();
//1
//2
//3
Disable方法实例
// a sample logging function to be added to a callbacks list
var foo = function( value ){
console.log( value );
}
var callbacks = $.Callbacks();
// add the above function to the list
callbacks.add( foo );
// fire the items on the list
callbacks.fire( 'foo' ); // outputs: foo
// disable further calls being possible
callbacks.disable();
// attempt to fire with 'foobar' as an argument
callbacks.fire( 'foobar' ); // foobar isn't output and return Callbacks itself.
Disabled方法实例
var cb = $.Callbacks();
cb.add(function () {
console.log('add');
});
cb.disable();
console.log(cb.disabled());//true
Empty方法实例
// a sample logging function to be added to a callbacks list
var foo = function( value1, value2 ){
console.log( 'foo:' + value1 + ',' + value2 );
}
// another function to also be added to the list
var bar = function( value1, value2 ){
console.log( 'bar:' + value1 + ',' + value2 );
}
var callbacks = $.Callbacks();
// add the two functions
callbacks.add( foo );
callbacks.add( bar );
// empty the callbacks list
callbacks.empty();
// check to ensure all callbacks have been removed
console.log( callbacks.has( foo ) ); // false
console.log( callbacks.has( bar ) ); // false
Fire方法实例
// a sample logging function to be added to a callbacks list
var foo = function( value ){
console.log( 'foo:' + value );
}
var callbacks = $.Callbacks();
// add the function 'foo' to the list
callbacks.add( foo );
// fire the items on the list
callbacks.fire( 'hello' ); // outputs: 'foo: hello'
callbacks.fire( 'world '); // outputs: 'foo: world'
// add another function to the list
var bar = function( value ){
console.log( 'bar:' + value );
}
// add this function to the list
callbacks.add( bar );
// fire the items on the list again
callbacks.fire( 'hello again' );
// outputs:
// 'foo: hello again'
// 'bar: hello again'
FireWith方法实例
// a sample logging function to be added to a callbacks list
var log = function( value1, value2 ){
console.log( 'Received:' + this[value1] + ',' + this[value2] );
}
var callbacks = $.Callbacks();
// add the log method to the callbacks list
callbacks.add( log );
// fire the callbacks on the list using the context 'a'
// and an arguments array
var a = {
foo: 'foo-a',
bar: 'bar-a'
};
var b = {
foo: 'foo-b',
bar: 'bar-b'
};
callbacks.fireWith( a, ['foo','bar']);
callbacks.fireWith( b, ['foo','bar']);
// outputs: Received:foo-a,bar-a
// outputs: Received:foo-b,bar-b
Fired方法实例
// a sample logging function to be added to a callbacks list
var foo = function( value ){
console.log( 'foo:' + value );
}
var callbacks = $.Callbacks();
// add the function 'foo' to the list
callbacks.add( foo );
// fire the items on the list
callbacks.fire( 'hello' ); // outputs: 'foo: hello'
callbacks.fire( 'world '); // outputs: 'foo: world'
// test to establish if the callbacks have been called
console.log( callbacks.fired() );
Has方法实例
// a sample logging function to be added to a callbacks list
var foo = function( value1, value2 ){
console.log( 'Received:' + value1 + ',' + value2 );
}
// a second function which will not be added to the list
var bar = function( value1, value2 ){
console.log( 'foobar');
}
var callbacks = $.Callbacks();
// add the log method to the callbacks list
callbacks.add( foo );
// determine which callbacks are in the list
console.log( callbacks.has( foo ) ); // true
console.log( callbacks.has( bar ) ); // false
注意:
- 如果之前Add的是匿名函数,使用has方法是查不到的
var cb = $.Callbacks();
cb.add(function(){console.log(1)});
cb.has(function(){console.log(1)}); //false
- has方法如果不传任何参数,表示判断当前Callbacks列表中是否存在函数
var cb = $.Callbacks();
cb.has(); //false
cb.add(function(){console.log(1)});
cb.has(); //true
Lock方法实例
// a sample logging function to be added to a callbacks list
var foo = function( value ){
console.log( 'foo:' + value);
}
var callbacks = $.Callbacks();
// add the logging function to the callback list
callbacks.add( foo );
// fire the items on the list, passing an argument
callbacks.fire( 'hello' );
// outputs 'foo: hello'
// lock the callbacks list
callbacks.lock();
// try firing the items again
callbacks.fire( 'world' );
// as the list was locked, no items
// were called so 'world' isn't logged
Locked方法实例
// a sample logging function to be added to a callbacks list
var foo = function( value ){
console.log( 'foo:' + value);
}
var callbacks = $.Callbacks();
// add the logging function to the callback list
callbacks.add( foo );
// fire the items on the list, passing an argument
callbacks.fire( 'hello' );
// outputs 'foo: hello'
// lock the callbacks list
callbacks.lock();
// test the lock-state of the list
console.log ( callbacks.locked() ); //true
Remove方法实例
// a sample logging function to be added to a callbacks list
var foo = function( value ){
console.log( 'foo:' + value );
}
var callbacks = $.Callbacks();
// add the function 'foo' to the list
callbacks.add( foo );
// fire the items on the list
callbacks.fire( 'hello' ); // outputs: 'foo: hello'
// remove 'foo' from the callback list
callbacks.remove( foo );
// fire the items on the list again
callbacks.fire( 'world' );
// nothing output as 'foo' is no longer in the list/code>
注意:
添加的匿名函数是不能被这样删除的,若是一写要删除的话,只能使用empty方法删除所有。
Disable与Lock的区别:
Disable和Lock功能基本上是一样的,只有在$.Callbacks(‘memory’)使用了 memory参数时,略有一些不同。具体如下:
Disable是禁用所有功能,cb.locked() 和 cb.disbled() 都返回 true。
而 Lock 则有一点不同:在 cb 执行过一次 fire 后,再去lock(),这时,cb.locked() 返回 true,但 cb.disabled()返回 false,而且后面继续调用 cb.add(fn) 会立即执行当前的这个 fn 函数。