JavaScript防抖

防抖

为什么需要防抖

如同感应门，没有人需要进入的时候关闭，有人需要进入的时候自动打开。每一个人靠近的时候，触发一次门打开，进入之后关闭，在关闭的时候有人靠近又会打开，因为在一段时间之内有很多人会进出，频繁的开关会夹到人，所以为了安全和方便，需要将很多的触发归为一次触发，在一段时间内持续触发就会，开，过了一段时间没人触发，就关。

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

多次的请求可能会造成网络的阻塞。

防抖应用在前端的场景

防止用户频繁相同的操作

1. 改变页面的大小
2. 滚动页面位置的统计
3. 输入框连续输入请求的次数控制
4. 防止表单多次提交

防抖设计步骤

点击->清除延时->设置定时

若在规定的时间内又有操作，再次清除延时，再次定时

若在规定的时间内没有操作，执行函数

防抖代码

    function payMoney(){
        console.log("已剁")
    }

    function debounce(func,delay){
    // 这里用了闭包
        let timer;
        return function (){
            let context = this;
            let args = arguments
            clearTimeout(timer)
            timer = setTimeout(function (){
                func.apply(context,arguments)
            },delay)
        }
    }

    button.addEventListener('click',debounce(payMoney,1000))