手把手教你用STM32和MATLAB搞定50Hz工频干扰：一个IIR陷波器的完整实现
2026/4/19 6:24:25
jQuery Callback (回调函数) 详解
在 jQuery 中，回调函数 (Callback Function)是一个在某个操作（如动画、Ajax 请求、事件处理）完成后立即执行的函数。
由于 jQuery 的动画和 Ajax 操作是异步的（Asynchronous），如果不使用回调函数，代码会按顺序执行，导致“动画还没结束，后面的代码就已经执行了”的问题。
一、为什么需要回调函数？
1. 异步执行的问题
jQuery 的动画方法（如hide(),fadeIn(),animate()）不会等待动画完成就立即执行下一行代码。
// ❌ 错误示例：代码会立即执行，动画还没开始$("#box").hide(1000);alert("盒子已经隐藏了！");// 动画还没结束，这个弹窗就出现了！2. 使用回调函数解决
将需要等待动画完成后再执行的代码放入回调函数中。
// ✅ 正确示例：动画完成后才执行 alert$("#box").hide(1000,function(){alert("盒子已经隐藏了！");// 1 秒后，动画完成后才执行});二、回调函数的基本语法
大多数 jQuery 方法都支持回调函数作为最后一个参数。
$(selector).method(duration,callback);duration: 动画持续时间（可选）。callback: 动画完成后的函数（可选）。
示例：链式调用中的回调
$("#box").slideUp(2000,function(){// 第一个动画完成$(this).css("background","red");// 执行第二个动画$(this).slideDown(2000,function(){// 第二个动画完成alert("所有动画完成！");});});三、常见场景中的回调函数
1. 动画效果中的回调
所有动画方法（hide,show,fadeIn,fadeOut,slideUp,slideDown,animate等）都支持回调。
// fadeIn 回调$("#box").fadeIn(1000,function(){console.log("淡入完成");});// animate 回调$("#box").animate({width:"200px"},1000,function(){console.log("宽度动画完成");});// 多个动画串联$("#box").fadeOut(500,function(){$(this).css("color","red");}).fadeIn(500,function(){console.log("颜色改变并淡入完成");});2. Ajax 请求中的回调
Ajax 是典型的异步操作，回调函数用于处理请求成功、失败或完成后的逻辑。
$.ajax({url:"api/data",success:function(data){// 请求成功后的回调console.log("数据加载成功:",data);$("#result").html(data);},error:function(xhr,status,error){// 请求失败后的回调console.error("请求失败:",error);},complete:function(){// 请求完成后的回调（无论成功或失败）console.log("请求结束");$("#loading").hide();}});简写方法中的回调：
// $.get 回调$.get("api/data",function(data){console.log(data);});// $.post 回调$.post("api/submit",{name:"John"},function(response){console.log(response);});// $.load 回调$("#div").load("page.html",function(response,status,xhr){if(status==="success"){console.log("加载成功");}});3. 事件处理中的回调
虽然事件处理函数本身就是一个回调，但有时需要在事件触发后执行额外逻辑。
$("#btn").click(function(){// 事件处理逻辑console.log("按钮被点击");// 执行动画$("#box").slideDown(500,function(){// 动画完成后的回调console.log("面板展开完成");});});四、回调函数中的this指向
在 jQuery 回调函数中，this关键字通常指向当前被操作的 DOM 元素。
$("#box").hide(1000,function(){// this 指向 #box 对应的 DOM 元素console.log(this);// <div id="box"></div>// 使用 jQuery 包装$(this).css("color","red");// 正确});注意：在 Ajax 回调中，this的指向可能不同（通常是 Ajax 设置对象），建议使用箭头函数或显式绑定。
// Ajax 回调中的 this$.ajax({url:"api/data",context:document.body,// 设置 this 的上下文success:function(){console.log(this);// <body> 元素}});// 或使用箭头函数（保留外层 this）constself=this;$.ajax({url:"api/data",success:function(){console.log(self);// 外层 this}});五、回调函数 vs 链式调用
1. 链式调用的局限性
链式调用虽然简洁，但无法处理“等待前一个动画完成”的逻辑。
// ❌ 错误：两个动画同时开始$("#box").fadeOut(1000).fadeIn(1000);// 结果：先淡出，然后立即开始淡入（而不是等淡出完成）2. 回调函数的优势
回调函数确保操作按顺序执行。
// ✅ 正确：先淡出，完成后淡入$("#box").fadeOut(1000,function(){$(this).fadeIn(1000);});3. 现代替代方案：Promise / async-await
jQuery 3.0+ 的 Ajax 方法返回Deferred 对象（类似 Promise），可以使用.done(),.fail(),.always()或async/await。
// 使用 Promise$.ajax("api/data").done(function(data){console.log("成功:",data);}).fail(function(){console.log("失败");});// 使用 async/await (需配合 Promise)asyncfunctionloadData(){try{constdata=await$.ajax("api/data");console.log(data);}catch(error){console.error(error);}}六、实战示例
1. 顺序动画（手风琴效果）
functionanimateAccordion(){$("#panel1").slideUp(500,function(){$("#panel2").slideDown(500,function(){$("#panel3").slideUp(500,function(){$("#panel1").slideDown(500);});});});}// 每 2 秒执行一次setInterval(animateAccordion,2000);2. 表单提交后的反馈
$("#form").submit(function(e){e.preventDefault();// 显示加载动画$("#loading").fadeIn(200);$.post("api/submit",$(this).serialize(),function(response){// 请求成功$("#loading").fadeOut(200,function(){$("#message").fadeIn(300,function(){// 3 秒后隐藏消息setTimeout(function(){$("#message").fadeOut(300);},3000);});});});});3. 图片预加载后的显示
functionpreloadImage(url,callback){constimg=newImage();img.onload=function(){callback(img);};img.src=url;}preloadImage("img/large.jpg",function(img){// 图片加载完成后淡入显示$("#container").html(img).hide().fadeIn(1000);});七、常见陷阱与注意事项
1. 忘记传递参数
// ❌ 错误：回调函数没有参数$("#box").animate({width:"100px"},1000,function(){// 这里无法访问动画相关的参数});// ✅ 正确：如果需要参数，需自行传递constdata="some data";$("#box").animate({width:"100px"},1000,function(){console.log(data);// 通过闭包访问});2. 回调函数中的this丢失
// ❌ 错误：箭头函数中的 this 不指向 DOM 元素$("#box").hide(1000,()=>{console.log(this);// 指向 window 或外层作用域});// ✅ 正确：使用普通函数$("#box").hide(1000,function(){console.log(this);// 指向 DOM 元素});3. 嵌套回调过深（回调地狱）
// ❌ 难以维护的嵌套回调$.ajax("url1",function(data1){$.ajax("url2",function(data2){$.ajax("url3",function(data3){// ...});});});// ✅ 使用 Promise 链或 async/awaitasyncfunctionloadData(){constdata1=await$.ajax("url1");constdata2=await$.ajax("url2");constdata3=await$.ajax("url3");}八、回调函数速查表
| 场景 | 方法 | 回调位置 | 示例 |
|---|---|---|---|
| 动画 | hide(),show(),fadeIn(),animate() | 最后一个参数 | .hide(1000, callback) |
| Ajax | $.ajax(),$.get(),$.post() | success,complete | success: callback |
| 加载 | .load() | 最后一个参数 | .load("url", callback) |
| 事件 | .on(),.click() | 函数本身 | .click(function() {...}) |
九、总结
- 回调函数是处理异步操作（动画、Ajax）完成后的逻辑的关键。
this指向：在动画回调中通常指向 DOM 元素，在 Ajax 回调中需注意上下文。- 链式调用 vs 回调：链式调用简洁，但无法处理“等待完成”的逻辑；回调函数确保顺序执行。
- 现代替代：对于复杂逻辑，考虑使用Promise或async/await替代嵌套回调。
掌握回调函数是编写流畅、可靠的 jQuery 代码的基础。