js 防抖和节流

今天摸鱼的时候，发现评论区一条有趣的回答‘防抖和节流是闭包的经典应用’，防抖和节流一直都有听说过，但是具体是什么我就不知道了，那么今天得把鱼摸得彻底。

函数防抖

简单来说就在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

function shake(delay){
    let timer;
    //闭包函数
    return function(){
        if(timer){
            //清空定时器
            clearTimeout(timer)
        }
        //在添加定时器
        timer = setTimeout(()=>{
            console.log('我又回来了')
        },delay)
    }
}
//声明一个匿名函数
let s = shake()
documemt.onmousemove = function(){
   //疯狂调用防抖函数，每次调用重启定时器
    s(2000)
}
//鼠标在页面疯狂的移动，最后停下来只打印一次'我又回来了'

应用场景有，滑动下拉刷新，输入框验证手机号码等

函数节流

每隔一段时间，只执行一次函数。

function shake(delay){
    let timer;
    //闭包函数
    return function(){
        if(timer){
           return
        }
        //在添加定时器
        timer = setTimeout(()=>{
            console.log('我又回来了')
            timer = null
        },delay)
    }
}
//声明一个匿名函数
let s = shake()
documemt.onmousemove = function(){
   //疯狂调用节流函数，每次调用时，只要定时器没有完成，都会等待完成后，再启用
    s(2000)
}
//鼠标在页面疯狂的移动，每隔一段时间打印一次'我又回来了'

应用场景有，高频点击提交，表单重复提交