JQuery 的 Callbacks() 函数

落日映苍穹つ 2022-05-15 06:56 210阅读 0赞

一个多用途的回调列表对象，提供了强大的的方式来管理回调函数列表。  
$.Callbacks()的内部提供了jQuery的$.ajax() 和 $.Deferred() 基本功能组件。它可以用来作为类似基础定义的新组件的功能。  
$.Callbacks() 支持的方法，包括 callbacks.add(),callbacks.remove(), callbacks.fire() and callbacks.disable()等  
详细的API见： [$.Callbacks API 比如：add | fire | fired | fireWith | has | disable | disabled | empty][.Callbacks API _add _ fire _ fired _ fireWith _ has _ disable _ disabled _ empty]

## $.Callbacks ##

我们通过调用$.Callbacks获取到一个callback实例，如下

var cb = $.Callbacks();

当然也可以使用 new 关键字来实例化出这个对象

var cb = new $.Callbacks();

> 为了尽可能的节省代码和避免混乱我们还是统一采用var cb = $.Callbacks();的方式去调用。

## $.Callbacks(flgs) ##

同时，在实例化一个 cb 的时候，还可以传递一些参数，参数类型为一个可以使用空格分隔的字符串。

#### 支持的 Flags描述: ####

这个 flags 参数是$.Callbacks()的一个可选参数, 结构为一个用空格标记分隔的标志可选列表,用来改变回调列表中的行为 (比如. $.Callbacks( ‘unique stopOnFalse’ )).

#### 可用的 flags: ####

<table> 
 <thead> 
  <tr> 
   <th align="left">参数名</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">once</td> 
   <td align="left">确保这个回调列表只执行一次(像一个递延 Deferred).</td> 
  </tr> 
  <tr> 
   <td align="left">memory</td> 
   <td align="left">当函数队列fire或fireWith一次过后，内部会记录当前fire或fireWith的参数。当下次调用add的时候，会把记录的参数传递给新添加的函数并立即执行这个新添加的函数。</td> 
  </tr> 
  <tr> 
   <td align="left">unique</td> 
   <td align="left">确保一次只能添加一个回调(所以有没有在列表中的重复).</td> 
  </tr> 
  <tr> 
   <td align="left">stopOnFalse</td> 
   <td align="left">当一个回调返回false 时中断调用</td> 
  </tr> 
 </tbody> 
</table>

默认情况下，回调列表将像事件的回调列表中可以多次触发。  
如何在理想情况下应该使用的flags的例子，见下文：

#### 实例 ####

####  ####

##### 1. Once #####

function fn1(val) { console.log(val)};
    function fn2(val) { console.log(val)};
    
    var callbacks = $.Callbacks( "once" );
    callbacks.add( fn1 );
    callbacks.fire( "foo" );
    callbacks.add( fn2 );
    callbacks.fire( "bar" );
    callbacks.remove( fn2 );
    callbacks.fire( "foobar" );
    
    /* output: foo */

##### 2. Memory #####

function fn1(val) { console.log(val)};
    function fn2(val) { console.log("fn2 says:" + val)};
    
    var callbacks = $.Callbacks( "memory" );
    callbacks.add( fn1 );
    callbacks.fire( "foo" );
    callbacks.add( fn2 );//Do immediately of fn2
    
    //Do fn1 at this time
    callbacks.fire( "bar" );
    callbacks.remove( fn2 );//Do immediately of fn2
    
    //Do fn1 at this time
    callbacks.fire( "foobar" );
    
    /* output: foo fn2 says:foo bar fn2 says:bar foobar */

##### 3. Unique #####

var callbacks = $.Callbacks( "unique" );
    callbacks.add( fn1 );
    callbacks.fire( "foo" );
    callbacks.add( fn1 ); // repeat addition will not usefull, only one fn1 exist.
    callbacks.add( fn2 );
    callbacks.fire( "bar" );
    callbacks.remove( fn2 );
    callbacks.fire( "foobar" );
    
    /* output: foo bar fn2 says:bar foobar */

##### 4. StopOnFalse #####

function fn1( value ){ 
        console.log( value );
        return false;
    }
    
    function fn2( value ){ 
        fn1("fn2 says:" + value);
        return false;
    }
    
    var callbacks = $.Callbacks( "stopOnFalse");
    callbacks.add( fn1 );
    callbacks.fire( "foo" );
    callbacks.add( fn2 );
    callbacks.fire( "bar" );
    callbacks.remove( fn2 );
    callbacks.fire( "foobar" );
    
    /* output: foo bar foobar */

因为$.Callbacks() 支持一个列表的flags而不仅仅是一个，设置几个flags，有一个累积效应，类似“&&”。这意味着它可能结合创建回调名单，unique 和确保如果名单已经触发，将有更多的回调调用最新的触发值 (i.e.$.Callbacks(“unique memory”)).

function fn1( value ){ 
        console.log( value );
        return false;
    }
    
    function fn2( value ){ 
        fn1("fn2 says:" + value);
        return false;
    }
    
    var callbacks = $.Callbacks( "unique memory" );
    callbacks.add( fn1 );
    callbacks.fire( "foo" );
    callbacks.add( fn1 ); // repeat addition
    callbacks.add( fn2 );
    callbacks.fire( "bar" );
    callbacks.add( fn2 );
    callbacks.fire( "baz" );
    callbacks.remove( fn2 );
    callbacks.fire( "foobar" );
    
    /* output: foo fn2 says:foo bar fn2 says:bar baz fn2 says:baz foobar */

Flag结合体是使用的$.Callbacks()内部的.done() 和 .fail()一个递延容器-它们都使用 $.Callbacks(‘memory once’).

$.Callbacks 方法也可以被分离, 为方便起见应该有一个需要，定义简写版本：

var callbacks = $.Callbacks(),
        add = callbacks.add,
        remove = callbacks.remove,
        fire = callbacks.fire;
    
    add( fn1 );
    fire( "hello world");
    remove( fn1 );

[.Callbacks API _add _ fire _ fired _ fireWith _ has _ disable _ disabled _ empty]: https://blog.csdn.net/hsl0530hsl/article/details/82081734