回调函数（简单易懂）

最新推荐文章于 2025-06-22 15:45:10 发布

熊熊举高高

最新推荐文章于 2025-06-22 15:45:10 发布

阅读量7.3k

点赞数 7

CC 4.0 BY-SA版权

文章标签： ajax javascript

本文链接：https://blog.youkuaiyun.com/weixin_41571938/article/details/118854484

本文通过具体实例解释了普通函数与回调函数的区别，展示了如何在实际应用中使用回调函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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);
        }
    });
};

之前写的有关于回调函数的理解