什么是回调函数？

回调函数就是当一个任务完成后要执行的函数。想象一下：你去餐馆点餐，点完后你不会一直站在柜台等，而是回到座位做自己的事。当餐准备好时，服务员会“回调”你来取餐。

在jQuery中，回调函数通常用在动画完成、AJAX请求返回、事件触发后等场景中。

回调函数的基本特点：

  • 在特定操作完成后执行
  • 可以作为参数传递给其他函数
  • 不会立即执行，而是在满足条件时执行
  • 让代码更具灵活性

为什么需要回调函数？

JavaScript是单线程语言，一次只能做一件事。如果我们遇到需要等待的操作（如加载数据、完成动画），如果一直等待会阻塞其他代码执行。

使用回调函数可以让代码在等待期间继续执行其他任务，等操作完成后再回头执行回调函数里的代码。

真实类比： 就像网购下单后，你不用一直盯着物流信息，快递到了会电话通知你（回调），期间你可以做其他事。

jQuery中常见的回调用法

1. 动画回调

// 基本语法：
$(selector).animate(styles, duration, easing, callback);

// 示例：
$(“#box”).animate({left: ‘250px’}, 1000, function() { // 动画完成后执行的回调函数 alert(“动画完成！”); });

动画回调示例

点击运行动画

2. 事件回调

// 基本语法：
$(selector).event(function() { // 事件触发后执行的回调函数 });

// 示例：
$(“button”).click(function() { // 按钮点击后执行的回调 alert(“按钮被点击了！”); });

3. AJAX回调

// success回调（请求成功时执行）
$.ajax({
  url: “data.json”,
  success: function(result) {
    // 请求成功后的回调函数
    console.log(“获取的数据：”, result);
  },
  error: function() {
    // 请求失败的回调
    alert(“请求失败！”);
  }
});

回调函数高级用法

1. 传递参数给回调函数

// 使用匿名函数包裹
$(“button”).click(function() { var customData = “自定义数据”; // 在匿名函数内部调用回调并传递参数 myCallback(customData); }); function myCallback(data) { console.log(“接收到的数据：”, data); }

2. 多个回调的执行控制

// 使用when().then()控制多个异步回调
$.when($.ajax(“data1.json”), $.ajax(“data2.json”))
  .then(function(result1, result2) {
    // 两个请求都完成后执行
    console.log(“两个请求都已完成”);
  }, function() {
    // 任意一个请求失败
    console.log(“至少有一个请求失败”);
  });
回调地狱问题： 过多的回调嵌套会让代码难以阅读和维护，这时可以考虑使用Promise、async/await等现代解决方案。