欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

$.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.
$.Callbacks API 比如:add | fire | fired | fireWith | has | disable | disabled | empty

具体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 函数。