jQuery.Callbacks() 方法（千字长文）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在 JavaScript 开发中，回调函数（callback）是处理异步操作、事件响应的核心工具。然而，当多个回调需要按特定顺序执行、动态添加或移除，或是需要处理错误时，手动管理这些函数会变得复杂且容易出错。jQuery.Callbacks() 方法正是为了解决这些问题而设计的回调队列管理器，它提供了丰富的功能来组织和协调回调函数的执行流程。

本文将从基础概念到实战案例，逐步解析 jQuery.Callbacks() 方法的原理、用法及进阶技巧，并通过代码示例帮助读者掌握这一工具。无论你是刚接触 JavaScript 回调机制的开发者，还是希望优化代码结构的中级工程师，都能从中获得实用的知识。

一、理解回调函数与回调队列

1.1 回调函数的基础概念

回调函数是指作为参数传递给另一个函数，并在特定时机被调用的函数。例如：

function process(data, callback) {  
  // 处理数据后调用回调  
  callback(data);  
}  

process("Hello", function(result) {  
  console.log(result); // 输出 "Hello"  
});  

这种模式在异步操作（如 setTimeout、AJAX 请求）中尤为常见。

1.2 回调队列的挑战

当需要管理多个回调函数时，例如：

• 按顺序执行多个异步任务
• 动态添加或移除回调
• 避免重复执行或内存泄漏

手动管理这些逻辑会变得冗长且易错。jQuery.Callbacks() 方法通过封装这些逻辑，提供了一套标准化的解决方案。

二、jQuery.Callbacks() 的核心功能

2.1 方法的基本语法

jQuery.Callbacks( [string] options )  

• 参数 options：可选的字符串，通过空格分隔，指定回调队列的行为模式（如 "once"、"memory"）。
• 返回值：一个回调队列对象，包含 add()、fire()、empty() 等方法。

2.2 核心功能概述

三、方法详解与进阶用法

3.1 基础用法：创建并触发回调队列

const callbacks = jQuery.Callbacks();  

// 添加回调  
callbacks.add(function() {  
  console.log("第一个回调");  
});  

callbacks.add(function() {  
  console.log("第二个回调");  
});  

// 触发所有回调  
callbacks.fire(); // 输出：第一个回调、第二个回调  

3.2 模式选项：自定义队列行为

通过 options 参数，可以为队列设置特殊规则。

3.2.1 "once" 模式：只触发一次

const onceCallbacks = jQuery.Callbacks("once");  

onceCallbacks.add(() => console.log("触发一次"));  
onceCallbacks.fire(); // 输出  
onceCallbacks.fire(); // 无输出（已触发过）  

3.2.2 "memory" 模式：记录最近的参数

const memoryCallbacks = jQuery.Callbacks("memory");  

memoryCallbacks.add((data) => console.log("接收到数据:", data));  
memoryCallbacks.fire("初始数据"); // 输出 "初始数据"  
memoryCallbacks.add((data) => console.log("新增回调接收到:", data));  
memoryCallbacks.fire(); // 输出 "初始数据"（因 memory 模式保留了上次参数）  

3.3 动态管理回调：添加、移除与清空

const dynamicCallbacks = jQuery.Callbacks();  

dynamicCallbacks.add(function() {  
  console.log("回调1");  
}).add(function() {  
  console.log("回调2");  
});  

// 移除指定回调  
dynamicCallbacks.remove(function() { console.log("回调1"); });  

// 清空所有回调  
dynamicCallbacks.empty();  

3.4 fireWith() 方法：指定执行上下文

const contextCallbacks = jQuery.Callbacks();  

contextCallbacks.add(function(name) {  
  console.log(`Hello ${name}, this is ${this.id}`);  
});  

const obj = { id: "User123" };  
contextCallbacks.fireWith(obj, ["Alice"]); // 输出：Hello Alice, this is User123  

四、实战案例解析

4.1 案例1：异步任务的有序执行

假设需要按顺序执行多个异步操作（如 AJAX 请求），并确保每个任务完成后触发下一个：

const tasks = jQuery.Callbacks();  

// 添加异步任务  
tasks.add(() => {  
  return new Promise(resolve => {  
    setTimeout(() => {  
      console.log("任务1完成");  
      resolve();  
    }, 1000);  
  });  
});  

tasks.add(() => {  
  return new Promise(resolve => {  
    setTimeout(() => {  
      console.log("任务2完成");  
      resolve();  
    }, 500);  
  });  
});  

// 顺序执行  
async function executeTasks() {  
  for (const task of tasks.queue()) {  
    await task();  
  }  
}  
executeTasks(); // 输出按顺序执行  

4.2 案例2：事件队列与插件开发

在插件开发中，可以通过 jQuery.Callbacks() 管理事件监听器：

(function($) {  
  $.fn.myPlugin = function() {  
    const events = $.Callbacks();  

    this.on("click", function() {  
      events.fire(); // 触发所有监听回调  
    });  

    return {  
      onEvent: function(callback) {  
        events.add(callback);  
        return this; // 链式调用  
      }  
    };  
  };  
})(jQuery);  

// 使用插件  
$("#myButton").myPlugin()  
  .onEvent(() => console.log("按钮被点击"));  

五、常见问题与解答

5.1 为什么需要 jQuery.Callbacks()，而不是手动管理回调？

• 避免重复代码：无需为每个场景重新编写队列逻辑。
• 标准化行为：通过预定义的模式（如 once、memory）减少错误。
• 扩展性：支持动态添加/移除回调，并提供链式调用等便捷方法。

5.2 jQuery.Callbacks() 与 Promise 的区别？

• 回调队列：更适合需要管理多个回调函数的场景，尤其是动态添加或分批执行的逻辑。
• Promise：专注于单个异步操作的链式处理，更适合线性流程。
• 结合使用：可通过 fireWith() 与 Promise 结合，例如：

  const promiseCallbacks = jQuery.Callbacks();  
  promiseCallbacks.add(() => console.log("Promise 回调"));  
  
  new Promise(resolve => {  
    setTimeout(() => {  
      promiseCallbacks.fireWith(null, ["完成"]);  
      resolve();  
    }, 1000);  
  });  
  

六、总结与展望

jQuery.Callbacks() 方法是一个强大且灵活的工具，它简化了回调函数的管理，尤其在需要动态控制执行流程或处理复杂异步逻辑时表现出色。通过理解其核心方法、模式选项及实际案例，开发者可以更高效地组织代码，减少冗余，并提升系统的可维护性。

随着现代 JavaScript 生态的演进，虽然原生 Promise 和 async/await 已成为主流，但 jQuery.Callbacks() 仍适用于需要兼容旧项目或特定场景（如插件开发、事件系统）的场景。掌握这一工具，将帮助你更好地应对复杂项目的挑战。

希望本文能为你提供清晰的指导，如果你有任何疑问或需要进一步探讨，欢迎在评论区交流！