回调函数（简单易懂）

article/2025/11/10 13:10:43

因为今天又遇到新的回调函数的形式

callback && callback()；

所以搜了一下回调函数，发现真的好多人写得好复杂啊，看得我昏昏欲睡还是看不懂，还有看到有的人说是主函数执行完再去执行回调函数，我顿时无语，直接看下面普通函数与回调函数的区别你就懂了

普通函数与回调函数的区别：
对普通函数的调用：调用程序发出对普通函数的调用后，程序执行立即转向被调用函数执行，直到被调用函数执行完毕后，再返回调用程序继续执行。从发出调用的程序的角度看，这个过程为“调用–>等待被调用函数执行完毕–>继续执行”

对回调函数调用：调用程序发出对回调函数的调用后，不等函数执行完毕，立即返回并继续执行。这样，调用程序执和被调用函数同时在执行。当被调函数执行完毕后，被调函数会反过来调用某个事先指定函数，以通知调用程序：函数调用结束。这个过程称为回调（Callback），这正是回调函数名称的由来。

简单的一个例子，转载

var name = 'shimily';var age = 20;//主函数function goTime(callback) {console.log('hello');callback && callback();   //有回调就执行，没有回调就不执行console.log(age,'=========');}//回调函数function actEnd(){console.log(name); }/*调用方法*/goTime();  //如果不传方法，则代表不需要执行回调goTime(actEnd);   //test是个方法，此处可以打印出test的值

程序在执行主函数的时候，当执行到callback && callback();时，有回调就执行，没有回调就不执行，我们这里的回调函数是actEnd()，当时注意！这里执行回调函数actEnd()的时候，主函数还是在执行的
在这里插入图片描述
实战例子：

//回调函数
getFirstCategoryData(function (data) {/*一级分类默认渲染*//*模版的使用顺序：json数据,定义模版，调用模版，返回html*/$('.cate_left ul').html(template('firstTemplate',data));/*绑定事件*//*initSecondTapHandle();*//*第一个一级分类对应的二级分类*/var categoryId = $('.cate_left ul li:first-child').find('a').attr('data-id');render(categoryId);});//主函数
var getFirstCategoryData = function (callback) {$.ajax({url:'/category/queryTopCategory',type:'get',data:'',dataType:'json',success:function (data) {callback && callback(data);}});
};