函数防抖（debounce）

函数防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

简单的说，当一个动作连续触发，则只执行最后一次。

打个比方，坐公交，司机需要等最后一个人进入才能关门。每次进入一个人，司机就会多等待几秒再关门

/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒，防抖期限值
*/
function debounce(fn,delay){
    let timer = null //借助闭包
    return function() {
        if(timer){
            clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
            timer = setTimeout(fn,delay) 
        }else{
            timer = setTimeout(fn,delay) // 进入该分支说明当前并没有在计时，那么就开始一个计时
        }
    }
}

使用场景 先说一个常见的功能，很多网站会提供这么一个按钮：用于返回顶部

函数节流（throttle）

 限制一个函数在一定时间内只能执行一次

举个例子，乘坐地铁，过闸机时，每个人进入后3秒后门关闭，等待下一个人进入

为了方便理解，我们首先通过一个可视化的工具，感受一下三种环境（正常情况、函数防抖情况 debounce、函数节流 throttle）下，对于mousemove事件回调的执行情况 

正常情况下，竖线非常密集，函数执行的很频繁。

debounce（函数防抖）则很稀疏，只有当鼠标停止移动时才会执行一次

throttle（函数节流）分布的较为均已，每过一段时间就会执行一次。