详解JS中的回调函数

JS中的回调函数对于入门者来说是不容易理解的，我在学习过程中也吃了它的苦头。学习JS一段时间过后，我也比较熟悉回调函数，现在把自己的心得分享出来。

那么，到底什么是回调函数呢？为什么JS中要有这个概念呢？

先举一个生活中的栗子：大家送女朋友回家，到了小区门口，对女朋友说到家了给我打个电话然后我在打车回去。等了五分钟，女朋友到家了，给你打电话，之后你也打车回家。

这个栗子中，你打车回家 就是 回调函数 。女朋友回家的过程，其实就一个异步函数，这个异步函数执行完毕之后，打电话（调用回调函数），然后执行回调函数（打车回家）

下面举一个JS代码栗子：

    var num = 0
    num++
    console.log(num)
    //输出结果为：1

加入异步函数之后：

    var num = 0
    
    setTimeout(function () {
        num++
    }, 3000)

    console.log(num)
    //输出结果为：0

按照我们原本的目的，输出结果应该为num=1，可为什么还是0呢？
因为JS是一种异步执行语言，尽管计时器中将num自加了，但是JS不会死等时间结束再跳出函数，而是马上就会执行下一步语句(也就是输出num)，但这时候3秒钟根本就没结束，num还没有自加，所以输出结果还是0。

大家也许会想，将计时器时间设置为0，会不会有效呢？

    var num = 0

    setTimeout(function () {
        num++
    }, 0)
    
    console.log(num)
    //输出结果为：0

不管用的，不论计时器时间多少，只要它还是个异步函数，JS事件机制就会把它压进异步函数队列，先执行完同步函数（也就是一些普通的语句），再执行异步函数。

若是想让他输出为1，该怎么办呢？这就需要回调函数（callback）

    var num = 0

    setTimeout(function () {
        num++
        callback()
    }, 3000)

    function callback() {
        console.log(num)
    }
    //输出结果为：1

这里的callback函数名可以随意取，如果没有其他的含义，推荐用callback。

此时再想想最开始的栗子，计时器3000毫秒（女朋友回家的过程）后执行num++，再调用回调函数 callback() （给你打电话），输出num（你打车回家）。

如果你在这片文章收获到了你想要的东西，记得点个赞哦~