$.Callbacks API 比如：add | fire | fired | fireWith | has | disable | disabled | empty

刺骨的言语ヽ痛彻心扉 2022-05-15 06:51 90阅读 0赞

$.Callbacks用来管理函数队列。采用了观察者模式，通过add添加操作到队列当中，通过fire去执行这些操作。实际上$.Callbacks是1.7版本从$.Deferred对象当中分离出来的，主要是实现$.Deferred功能。

$.Callbacks()详细信息，请参考：[JQuery 的 Callbacks() 函数][JQuery _ Callbacks_]

jquery-3.3.1.js 版本的 Callbacks 主要有以下一些API.  
![这里写图片描述][70]

# 具体API列表如下： #

<table> 
 <thead> 
  <tr> 
   <th align="left">方法名</th> 
   <th align="left">参数</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">add(callbacks)</td> 
   <td align="left">总有三种参数形式:<br>1. 单个函数参数<br>2. 多个函数参数<br>3. 数组参数</td> 
   <td align="left">向内部队列添加函数</td> 
  </tr> 
  <tr> 
   <td align="left">disable()</td> 
   <td align="left">无</td> 
   <td align="left">禁用回调列表中的回调</td> 
  </tr> 
  <tr> 
   <td align="left">disabled()</td> 
   <td align="left">无</td> 
   <td align="left">回调列表是否被禁用，返回Boolean类型</td> 
  </tr> 
  <tr> 
   <td align="left">empty()</td> 
   <td align="left">无</td> 
   <td align="left">从列表中删除所有的回调</td> 
  </tr> 
  <tr> 
   <td align="left">fire(arguments)</td> 
   <td align="left">传回给回调列表的参数或参数列表</td> 
   <td align="left">依次执行列表中的所有函数</td> 
  </tr> 
  <tr> 
   <td align="left">fireWith([context][,args])</td> 
   <td align="left">context: 该列表中的回调被触发的上下文引用<br>args: 一个参数或参数列表传回给回调列表。</td> 
   <td align="left">访问给定的上下文和参数列表中的所有回调</td> 
  </tr> 
  <tr> 
   <td align="left">fired()</td> 
   <td align="left">无</td> 
   <td align="left">回调列表是否有执行过</td> 
  </tr> 
  <tr> 
   <td align="left">has(callback)</td> 
   <td align="left">需要判断的函数</td> 
   <td align="left">判断函数队列中是否存在某个函数</td> 
  </tr> 
  <tr> 
   <td align="left">lock()</td> 
   <td align="left">无</td> 
   <td align="left">锁定在其当前状态的回调列表</td> 
  </tr> 
  <tr> 
   <td align="left">locked()</td> 
   <td align="left">无</td> 
   <td align="left">回调列表是否被锁</td> 
  </tr> 
  <tr> 
   <td align="left">remove(callbacks)</td> 
   <td align="left">需要删除的函数或函数数组</td> 
   <td align="left">删除回调或回调列表的集合</td> 
  </tr> 
 </tbody> 
</table>

## 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多个匿名函数 ####

## 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方法实例 ##

## 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 函数。

[JQuery _ Callbacks_]: https://blog.csdn.net/hsl0530hsl/article/details/82082984
[70]: /images/20220515/866a52f9fc704d1dbbbfa24459d699ba.png