phpstudy集成环境

 首页 > js的回调函数一般都用来做什么

js的回调函数一般都用来做什么

在写网页小游戏和javascript的回调函数杠上了，之前看了好多大牛写的帖子，比如回调是一个函数的指针，回调是用来刷新canvas的画布，回调多用setTimeout和setInterval，还有异步操作数据库，比如ajax，感觉林林总总的，能不能大家集思广益，总结一下js的回调到底能干嘛，主流的技术层面都用callback来干嘛？

回调是把return存下来调它才执行

你就这样理解:
callback回调函数就是通知关心你业务处理结果的小伙伴一个接口,
其它小伙伴就可以根据你的结果来执行他们的业务逻辑

回调有同步回调和异步回调

function myLogicSync(callback){
    callback();//同步回调
}

function myLogicAsync(callback){
    setTimeout(function(){
        callback();//异步回调
    });
    
}

打个比方，你身份证到期了，要去派出所拍摄新证，一般派出所是30天才可以拿新证件。 。。。
用同步的思想来解释这件事情就是
你（主线程，当然js只有一个主线程），跑去派出所办证（调用 createNewIDCard（yourFace）方法），拍完了，你住在派出所30天,期间你哪儿都不能去，只能傻等，第31天了派出所把新证件给了你（return newCard）。

用异步+回调的思想来解释这件事情就是
你（主线程，当然js只有一个主线程），带着你的爹（callback），跑去派出所办证（调用 createNewIDCard（yourFace，callback）方法），拍完了，你高高兴兴的离开派出所干别的事情去了，你把你爹留在派出所，让他在那边住30天，等到31天了，他会把新的证件给你带回来。

搞那么复杂干嘛啊。
回调函数，直白一点解释就是
某件事情干完之后可以干什么 || 满足某些条件之后干什么
比如运动，

$('.box').animate({ width: 100px }, function() {
    // 当.box的宽度运动到100px之后做什么
});

比如ajax中当请求成功丢个函数在这里

$.get({
    method: xxx,
    url: xxx,
    type: xxx,
    success: function() {
        callback(); // 请求成功我要干点什么
    }
})

有的函数的参数，就是一个函数，但是这个是函数的参数不一定叫做回调函数啊。
比如setTimeout/setInterval中的函数参数，我个人觉得没有必要把他理解为回调函数吧！语义不符合嘛。

用函数当成参数之后，this的指向会发生神奇的变化，因为这里的this可以在函数中自己指定，因此在运用的时候一定要注意，比如我要定义一个自己的回调函数，在函数中传入参数fn，在函数最末尾这样写

function demo(xxx, item, fn) {
    ...
    fn && fn.call(item);
}

xx你来给我干这个活，干完了记得按一下这个按钮，至于这个按钮按下去会怎么样不知道但是这个按钮被人按了就可以确定xx把这个货已经干完了.

至于他什么时候干完这个就不管了.

回调函数就是在执行了一个东西了之后，你可以有一个东西实现你想用执行的返回结果干些什么事情的东西，或者说是在执行完当前的东西你还想继续干些什么的一个参数；什么指针啊什么的，不用想得这么深奥。
举个例子：

function caonima(a,b,callback) {
    var c = a+b; // 当前函数执行得到了一个结果
    alert(c);
    callback(c);//这个就是传入的回调函数，外部传入的函数，使用当前函数产生的结果，做些事情
}
// 定义了一个函数，用于回掉
function haha(c) {
    alert('这是回调函数获取到的值:'+c);
    alert('这就是我这个回调函数干的事情');
}
var a = 1;
var b = 2;
caonima(a,b,haha); // 传入haha回调函数
caonima(a,b,function(c) {
    alert('这是传入的匿名回调函数');
});

caonima函数定义了一个回调函数的callback参数，用于传入你想执行的自定义函数，就是回调函数，上面的代码相当于下面的代码：

function caonima(a,b) {
    var c= a+b;
    alert(c); // 指定当前函数弹出一个值
    return c;
}
function haha(c) {
    alert(c);
}
var a = 1;
var b = 2;
var c = caonima(a,b); //指定这个函数，返回一个结果
haha(c);//使用上一个函数返回的结果给这个函数用

对比这两种写法，我觉得第二种写法没有第一种写法爽，第一种写法封装性更好，比如caonima函数不够完善，然后就会留一个 接口，让你传入回调函数继续处理，这样就避免去修改第一个函数；或者第一个函数是你写的，可能你觉得你写得不够完善，你也可以留这么一个接口，让下一个人使用的时候，直接传入回调函数进行他想要的处理；同样的，这种写法让程序的扩展性更强，逻辑更清晰，至少我是这么认为的。
我看关于这个回答有很多人距离ajax，这个比较经典，因为ajax是异步处理的，也就是不同步的，不可能像第二种那样先是var c = caonima(a,b); haha(c);
为什么呢？因为是异步的，所以haha的执行并不一定需要等到caonima(a,b);执行完才执行，haha(c);可能会先比caoniama先执行；那么先执行haha肯定会出错！！！！！
如果用回调函数的方式，caonima执行完了之后，肯定会调用haha这个函数，因为在caonima函数里执行的程序是同步的。当然，我举这个例子并不是说我这里的示例代码是异步的，这仅仅是做个假设，主要是解释ajax。
建议你看看ajax面向对象相关的资料，很多东西你就明白了。

你们这些读书人，就爱搞这么多复杂的名词和定义，回调函数不就是一个参数吗？当你自己打包方法的时候发现用return来返回数据不行，那就用回调函数来接收返回的数据咯。或者觉得这个方法就可以决定下一步该怎么做，就用回调函数

这样说可能简单些：回调函数是一个作为参数传给另一个函数的函数，另一个函数里面可以自由决定什么时候执行回调函数。比如当ajax请求完成时，会执行你写的回调函数，又比如侦测到用户点击了按钮，会执行你写的回调函数。

比如我自己写一个方法，这个方法的功能是获取web接口数据，并判断数据是否符合要求，不符合直接报错了，符合就调用你传进来的函数。这样你在回调函数内写任何东西，都会在判断成功之后执行，而如果你用的是return，你还要在callback内做判断（事实上我这个例子也用不了return，因为数据的获取不是同步的）

function getAjaxData(callback){
    $.post('xx',function(data){
        if(data.status==1){
            callback(data);
        }else{
            console.error('数据不对啊:',data);
        }
    },'json')
}

JS里面用的最多的应该是作为事件的处理器。即当一个事件发生时，用来响应事件的函数。
比如：

实际上，setTimeout和setInterval的回调函数也可以看作是事件处理器，对应“时间到”这个事件。

数组的map、forEach方法的回调函数也是如此。

JS的世界就是一个事件的世界。

【热门文章】
【热门文章】