3.7.2 创建Callbacks对象支持的选项

发表于 更新于 分类于 ， ， Waline： 本文字数： 4.4k 阅读时长 ≈ 4 分钟

3.7.2 创建Callbacks对象支持的选项

使用jQuery.Callbacks()创建Callbacks对象时,可以传入可选的flags参数,该参数是一个以空格分隔的字符串列表,表示如何改变回调函数列表的行为,例如$.Callbacks('unique stopOnFalse')。
jQuery支持下列选项。

选项 描述
once 保证整个Callbacks对象只能被fire()一次。
memory 缓存前一次调用的参数。当执行完fire()后Callback会缓存这次fire方法传入的参数,对于新添加的任何回调函数,会自动触发该回调函数,并传入缓存的参数作为新添加的回调函数的参数。
unique 保证一个回调函数最多只被添加一次,也就是说,Callbacks 对象中不会出现重复的回调函数。
stopOnFalse 当某回调函数返回false时,立即中断调用。

程序示例

下面的程序代码示范了创建Callbacks时各选项的功能。

one选项的用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>

<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> 回调支持 </title>
</head>

<body>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript">
        // 定义两个简单的函数
        function fn1(value) {
            document.writeln("fn1函数输出：" + value + "<br />");
        }
        function fn2(value) {
            document.writeln("fn2函数输出：" + value + "<br />");
            return false;
        }
        // 使用"once"选项创建一个回调函数列表:整个`Callbacks`对象只能被`fire()`一次
        var callbacks = $.Callbacks("once");
        // 向回调函数列表中添加第一个回调函数
        callbacks.add(fn1);
        // 触发回调函数列表中的所有回调函数（只有fn1被触发）
        callbacks.fire("疯狂前端开发");
        // 再次向回调函数列表中添加一个回调函数
        callbacks.add(fn2);
        document.writeln("<hr/>");
        // 触发回调函数列表中的所有回调函数，此时不会起任何作用。
        callbacks.fire("~~疯狂Java~~");
    </script>
</body>

</html>

在创建Callbacks对象时指定了”once"选项,这表明该Callbacks对象只能被触发一次。

memory选项的用法

以下代码示范了memory选项的用法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>

<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> 回调支持 </title>
</head>

<body>
    <script type="text/javascript" src="../jquery-3.1.1.js">
    </script>
    <script type="text/javascript">
        // 定义两个简单的函数
        function fn1(value) {
            document.writeln("fn1函数输出：" + value + "<br />");
        }
        function fn2(value) {
            document.writeln("fn2函数输出：" + value + "<br />");
            return false;
        }
        // 使用特定选项创建一个回调函数列表
        var callbacks = $.Callbacks("memory");
        // 向回调函数列表中添加第一个回调函数
        callbacks.add(fn1);
        // 触发回调函数列表中的所有回调函数（只有fn1被触发）
        // "疯狂前端开发"参数将会被缓存
        callbacks.fire("疯狂前端开发");
        // 添加并触发fn2函数,以前一次调用fire的参数作为自动触发的参数.
        callbacks.add(fn2);
        document.writeln("<hr/>");
        // 再次触发回调函数列表中的所有回调函数（fn1、fn2被触发）
        // "疯狂Java"参数将会被缓存
        callbacks.fire("疯狂Java");
        // 从回调函数列表中删除fn1、fn2函数
        callbacks.remove([fn1, fn2]);
        document.writeln("<hr/>");
        // 添加并触发fn1函数,以前一次调用fire的参数作为自动触发的fn1的参数.
        callbacks.add(fn1);
    </script>
</body>

</html>

在创建Callbacks 时指定了”memory"选项,这表明该Callbacks 对象将会保留上次调用fire()方法的参数,并以该参数自动激发新添加的回调函数。

stopOnFalse选项

以下代码示范了stopOnFalse选项的用法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>

<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> 回调支持 </title>
</head>

<body>
    <script type="text/javascript" src="../jquery-3.1.1.js">
    </script>
    <script type="text/javascript">
        // 定义两个简单的函数
        function fn1(value) {
            document.writeln("fn1函数输出：" + value + "<br />");
            return false;
        }
        function fn2(value) {
            document.writeln("fn2函数输出：" + value + "<br />");
            return false;
        }
        // 使用stopOnFalse选项创建一个回调函数列表:当某回调函数返回`false`时,立即中断调用
        var callbacks = $.Callbacks("stopOnFalse");
        // 向回调函数列表中添加第一个回调函数
        callbacks.add(fn1);
        // 触发回调函数列表中的所有回调函数（只有fn1被触发）
        callbacks.fire("疯狂前端开发");
        // 再次向回调函数列表中添加一个回调函数。
        callbacks.add(fn2);
        document.writeln("<hr/>");
        // 再次触发回调函数列表中的所有回调函数，
        // 依然只有fn1被触发，因此fn1返回了false，它阻止了fn2被触发）
        callbacks.fire("疯狂Java");
    </script>
</body>

</html>

在创建Callbacks时指定了”stopOnFalse"选项,这表明该Callbacks对象触发回调函数列表时,只要任一个回调函数返回了false,都将会导致后面的回调函数不会被调用。

使用多个选项

不仅如此,创建Callbacks对象时,还可传入多个空格隔开的选项,多个选项的效果将会被”累加”。例如$.Callbacks("unique memory")创建的Callbacks对象既会缓存前一次调用fire()方法的参数,也会保证Callbacks对象中不出现重复的回调函数。