jQuery: Callbacks

Posted 2020-10-08

jQuery 中提供了一个Callback的工具类Callbacks，它提供了一个Callback Chain。使用它可以在一个chain上来执行相关操作。它也是jQuery中的ajax， Deferred的基础。我们也可以使用它来构建需要异步执行的组件等。

 

Callbacks API说明

构造器

jQuery.Callbacks(flags) 创建Callbacks对象。

Callbacks对象里包含了一个callback function的数组（也称为 callback chain）。

 

method说明

add(function|functions) : 将一个或多个funcation作为一个callback function 添加到callback chain中。

remove(function|functions) ：从callback chain中移除指定的callback function。

fire(arguments):触发callback chain。在执行chain中的每一个callbakc function时，参数都是一样的。

fireWith(context,arguments): 在context下执行callback chain。

disable(): 禁用Callbacks。其实是将chain设置为undefined。所以在禁用后，add()是添加不成功的，那么fire时也就不会有什么操作了。

empty()：只是将chain内容清空。

 

构造器参数

flags:

·unique chain中的funcation是不能重复的。如果重复添加时，是添加不了的。生效于添加阶段（也就是在add函数中使用）。

·once 是整个链中的每一个callback function都要被执行一次，并且只执行一次。

·memory 保留上一次fire时的参数，并记录上一次fire时执行到第n个callback function。在下一次fire时，先将上一次未执行的（包括上一次之后，又新加的callback）执行完毕，然后才开启新一轮执行。

·stopOnFalse 执行一个callback时判断执行结果是否为false，如果是false的话就停止不在执行。

 

重要流程

Add一个函数的流程：

1）如果有unique标志，判断要添加的是否存在，只在不存在时添加到chain中。

2）如果没有unique标志，代表可以重复。直接添加到chain中。

 

 

Fire的流程：

1）设置context

如果没有指定context，那么context值是 Callbacks对象。

2）将chain中未执行的functions执行一遍。在此过程中，每执行完一个就会基于stopOnFalse来进行判断（如果设置的话）

3）后置处理

　　如果Callbacks可以多次执行：

       　　如果还有没有执行的参数，再次执行。

　　否则：（只能执行一次）

　　　　如果被stopOnFalse了，执行disable()。

      　　否则：执行empty

 

 Demo

<script src="https://code.jquery.com/jquery-1.7.2.js" integrity="sha256-FxfqH96M63WENBok78hchTCDxmChGFlo+/lFIPcZPeI="   crossorigin="anonymous"></script> <script type="text/javascript"> $(function(){ function fn1(value){ console.log(arguments.length,value); }   function fn2(value){ return "fn2, " + value; }   function fn3(value){ fn1(fn2(value)); } debugger; var callbacks = jQuery.Callbacks("once memory"); callbacks.add(fn1,fn2,fn3); callbacks.fire("hello_0") console.log("--------1-------") callbacks.add([fn1,fn3]); callbacks.add(fn2); callbacks.add(fn3); callbacks.fire("hello_1"); });   </script>