防抖

防抖

当持续触发事件，一定时间内没有再次触发，事件处理函数才会执行，如果设定的时间之内又触发了事件，则重新开始延时。

实现：

• 利用计时器，规定时间内触发事件，重新开始延时，清除上次计时器
• 利用闭包把计时器保存在内存中

应用场景：

• 输入搜索，输入结束后n秒才发送搜索请求
• button按钮点击事件，点赞操作，登录等
• 使用echarts，改变浏览器宽度的时候，重新渲染

<script>
        var input = document.getElementById('input')
        //防抖函数
        function debounce(delay){
            let timer
            return function(value){
                clearTimeout(timer)
                timer = setTimeout(()=>{
                    console.log(value)
                },delay)
            }
        }
        var debounceFn = debounce(1000)
        input.addEventListener('input',function(e){
            debounceFn(e.target.value)
        })
    </script>