JavaScript回调函数详解

回调函数

回调函数就是传递一个参数化的函数，就是将这个函数作为一个参数传到另一个主函数里面，当那一个主函数执行完之后，再执行传进去的作为参数的函数。这个过程的参数化的函数就叫做回调函数。换个说法也就是被作为参数传递到另一个函数（主函数）的那个函数。回调函数并不会马上被执行。它会在包含它的函数内的某个特定时间点被“回调”

function fxFnOne () {
    console.log('fx is 18 years old')
}
function fxFnTwo () {
    console.log('fx is a great girl')
    setTimeout(fxFnOne, 1000) // 1秒钟后调用callback函数
    console.log('yes')
}
console.log('fx1')
fxFnTwo()
console.log('fx2')
// 依次输出  
// fx1 
// fx is a great girl 
// yes 
// fx2 
// fx is 18 years old

// 注意到click方法中是一个函数而不是一个变量
// 它就是回调函数
$('#fx').click(function () {
    console.log('fx is a great girl')
})
// 或者
function fxFn () { // 它就是回调函数
    console.log('fx is a great girl')
}
$('#fx').click(fxFn)

回调函数调用实现的例子

var fxArr = ["good", "great", "smart", "love"];
fxArr.forEach(function (eachName, index){
    console.log(index + 1 + ". " + eachName); // 1. good, 2. great, 3. smart, 4. love
});

// 第一种方法：匿名函数作为回调函数
var fxName = 'fx'
function fxFn (options, callback) {
    var arr = []
    arr.push(options)
    //将全局变量generalLastName传递给回调函数
    callback(fxName, arr)
}
fxFn({name: 'fx', age: 18}, function (fxName, arr) {
    console.log(fxName + ':' + arr[0].age) // fx:18
})

================

// 第二种方法：命名函数作为回调函数
var fxName = 'fx'
function fxFn (options, callback) {
    var arr = []
    arr.push(options)
    //将全局变量generalLastName传递给回调函数
    callback(fxName, arr)
}
function fxCall (fxNames, arr) {
    console.log(fxNames + ':' + arr[0].age) // fx:18
}
fxFn({name: 'fx', age: 18}, fxCall)

在执行之前确保回调函数是一个函数

function fxFn (options, callback) {
    // 确保callback是一个函数   
    if (typeof callback === 'function') {
        // 调用它，既然我们已经确定了它是可调用的
        callback(options)
    }
}