jQuery.Callbacks()回调函数队列用法详解

下面我将讲解“jQuery.Callbacks()回调函数队列用法详解”的攻略。

什么是jQuery.Callbacks()？

jQuery.Callbacks()是jQuery提供的一个回调函数队列构造函数，用于实现自定义的回调函数体系。它支持多个回调函数列表，以及控制这些回调函数列表的触发次数和所在上下文等细节。让我们逐一了解一下。

创建回调函数列表

要想使用jQuery.Callbacks()，需要先定义一个回调函数列表。可以使用如下的语法创建：

var callbacks = $.Callbacks();

添加回调函数

在创建了回调函数列表后，就可以往里添加回调函数。添加回调函数的方式有多种，可以一个一个添加，也可以带着函数数组一次性添加。示例：

function fn1() {
  console.log('fn1');
}
function fn2() {
  console.log('fn2');
}

// 逐个添加回调函数
callbacks.add(fn1);
callbacks.add(fn2);

// 利用数组一次性添加多个回调函数
callbacks.add([fn1, fn2]);

可以看到，在jQuery.Callbacks()中添加回调函数其实就是一个普通的函数调用。

触发回调函数

回调函数列表的所有函数默认是同步执行的，可以通过fire方法来触发回调函数。而且，在之前执行fire方法时，必须已经添加过函数。

下面的示例展示如何触发回调函数：

callbacks.fire();
// 输出：
// fn1
// fn2

可以看到，fire方法会按添加函数的顺序依次调用回调函数列表中的各个函数。

确定上下文

要确保回调函数中this的指向是我们期望的值，可以使用jQuery.Callbacks()提供的context方法。

var obj = {
  name: 'obj',
  callback: function() {
    console.log(this.name);
  }
};

callbacks.add(obj.callback);
callbacks.fireWith(obj);
// 输出：obj

这里使用了fireWith方法来指定回调函数中的this指向obj对象。

控制回调函数的执行

可以使用jQuery.Callbacks()提供的以下方法来控制回调函数的执行：

once()

在第一个回调执行之后，就移除回调函数列表中的所有回调函数。

callbacks.add(fn1);
callbacks.addOnce(fn2);
callbacks.fire();
callbacks.fire();
// 输出：
// fn1
// fn2
// fn1
// （第二轮执行里不包括fn2了）

可以看到，使用addOnce添加的回调函数只会在第一次执行时被调用。

memory

把最近一次fire触发的回调函数列表缓存下来，在下一次添加回调函数时，立即调用之前缓存的回调。

var callbacks = $.Callbacks('memory');
callbacks.add(fn1);
callbacks.fire();
callbacks.add(fn2); // 这里会立即调用fn2

由于开启了memory缓存，fn2会在添加时立即被调用。

stopOnFalse

只要有一个回调返回false，就停止执行后续的回调。下面的示例演示了可传递参数的用法：

callbacks.add(function() {
  console.log('step1');
  return false;
});
callbacks.add(function() {
  console.log('step2');
});
callbacks.fire('trigger');
// 输出：
// step1

callbacks.empty();
callbacks.add(function() {
  console.log('step1');
  return 'not false';
});
callbacks.add(function() {
  console.log('step2');
});
callbacks.fire('trigger');
// 输出：
// step1
// step2

第一个执行结果，step1 执行后，就停止了后续的回调。接下来的第二个执行结果，则没有出现停止后续回调的现象，因为step1返回的是一个非false的结果。

总结

jQuery.Callbacks()是一种很方便的回调函数队列实现方法，不仅可以用于事件绑定的底层代码实现，也可以适用于大多数自定义的回调函数应用场景。

以上就是本次攻略的全部内容。希望对您有帮助。