js 回调函数精析

UpdateTime--2018年9月13日16点51分

1.什么是回调函数？

　　在JavaScript中，回调函数具体的定义为：

　　函数A作为参数(函数引用)传递到另一个函数B中，并且这个函数B执行函数A。我们就说函数A叫做回调函数；

　　如果没有名称(函数表达式)，就叫做匿名回调函数。

　　简单的来说，将函数作为参数传递给另一个方法。

2.回调函数适用场合

　　jquery 页面加载完毕　　$(function(){"要执行操作"})；

　　jquery iframe页面加载完毕 $('#iframe').load(function(){"要执行操作"})；

　　jquery ajax调用，绑定事件，setTimeout()，setInterval()。。。

3.回调函数不带参数调用

　　回调函数为普通函数

　　方式一：推荐使用

function parentFun (callback) {
    callback();
}

function childFun () {
    alert("回调函数");
}
// 调用
parentFun(childFun);

　　方式二

function parentFun (callback) {
    eval(callback);
}

function childFun () {
    alert("回调函数");
}
// 调用
parentFun("childFun()");

　　回调函数为匿名函数

function parentFun (callback) {
    callback();
}
// 调用
parentFun(function(){
    alert("匿名函数作为回调函数");
});

4.回调函数带参调用

　　回调函数为普通函数

　　方式一（推荐使用）

function parentFun (callback) {
    eval(callback);
}

function childFun (param) {
    alert(param);
}
// 调用
parentFun('childFun("回调函数")');

　　方式二

function parentFun (callback,param) {
    callback(param);
}

function childFun (param) {
    alert(param);
}
// 调用
parentFun(childFun,"回调函数");

　　方式三：推荐使用

function parentFun (callback) {
    callback();
}

function childFun (param) {
    alert(param);
}
// 调用
parentFun(function(){
    childFun("回调函数");
});

　　方式四

function parentFun (callback,param) {
    callback(param);
}

function childFun (param) {
    alert(param);
}
// 调用
parentFun(function(param){
    childFun(param);
},"回调函数");

　　方式五：不推荐使用

function parentFun (callback) {
    callback("回调函数");
}

function childFun (param) {
    alert(param);
}
// 调用
parentFun(childFun);

　　小结：

　　方式一和方式五虽然可以实现，但是不支持使用，因为jquery插件一般都不支持这种调用方式，通常支持的是方式三；

　　方式三和方式四本质上还是通过匿名函数实现的；

　　方式二和方式四都是将回调函数所需的入参作为主函数的一个参数来实现的。

　　回调函数为匿名函数

function parentFun (callback,param) {
    callback(param);
}
// 调用
parentFun(function(param){
    alert(param);
},"回调函数");

5.回调函数执行时机

　　同步执行的情况，回调函数一般是最后执行；

　　异步执行的情况(ajax)，回调函数不一定会执行。