说明

有两个函数：函数 a() 和函数 b()，函数 b() 作为参数，传递给函数 a() ，那么函数 b() 就是回调函数，即：作为参数的函数就是回调函数

应用场景

应用极为广泛：

让a函数调用b函数，b函数从1打印到100，回调函数能让a函数监控到b函数内部循环的进度
setTimeout() 定时执行
数组部分方法，如：
事件绑定
ajax
jquery库
js框架

例子

// 函数a，有一个形参，从形参看不出是函数
function a( fun ){
    fun() // 通过后面的()，可以看出调用函数了
}
// 函数b
function b(){
    console.log("函数b")
}
// 调用函数a，并将函数b传入
a(b)

执行结果：

函数b

案例

有数组如下：

let arr = [1,2,3,10,20,100,500]

定义函数，可以实现过滤功能，比如：

打印出数组中的偶数
打印出大于 3 的值
打印出小于 10 的值

分析

如果按照传统方式定义3个函数：

第一个函数：打印出数组中的偶数
第二个函数：只能打印大于 3 的值
第三个函数：只能打印出小于 10 的值

显然太笨了，如下：

let arr = [1,2,3,10,20,100,500]

function fun1(arr){
    for( let item of arr){
        if(item % 2 == 0){
            console.log(item)
        }
    }
}
fun1(arr)

解决

可以使用回调函数

定义主函数

形参：

参数1：数组
参数2：回调函数，该回调函数是对数组进行的操作

功能：遍历数组，并执行回调函数，将数组的元素传给该回调函数，如果该函数返回 true，表示符合条件，就打印该元素

function fun(arr,callback){
    for( let item of arr){
        let res = callback(item)
        if(res){
            console.log(item)
        }
    }
}

定义回调函数

形参：数组的一个元素

功能：定义过滤规则，即：能被 2 整除就打印，如下：

function callback(e){
    return e % 2 == 0
}

调用函数：

fun(arr , callback)

改写上面回调函数为匿名函数

调用函数时，传入匿名函数：

fun(arr , function (e){
    return e % 2 == 0
})

改写上面回调函数为箭头函数

调用函数时，传入箭头函数：

fun(arr , (e) => {
    return e % 2 == 0
})

简化上面的箭头函数

调用函数时，传入箭头函数：

fun(arr , (e) => e % 2 == 0 )

总结

最大的好处，调用函数 fun() 时，可以传入回调函数，在回调函数中，可以 任意定义过滤规则

原文出处：/show_1IX3lyQZeOtS.html

说明