防抖和节流

1、防抖

指触发事件后在n秒后函数执行，如果在n秒内又触发了事件，则会重新计算函数执行时间。应用场景（适合多次事件只响应一次的情况）：给按钮加防抖函数防止表单多次提交；判断scroll是否滑到底部；对于输入框连续输入进行AJAX验证时，用函数防抖能有效减少请求次数。

现给一个场景：现监听一个输入框，文字变化后触发change事件。若直接用keyup事件，则会频繁触发change事件。加了防抖后，用户输入结束或暂停时，才会触发change事件。

则封装后的防抖函数为：

    function debounce(fn, delay = 50){
        let timer = null  //timer是闭包中的,不能被别人修改
        return function(){
            if(timer){
                clearTimeout(timer)
            }
            timer = setTimeout(() => {
                fn.apply(this, arguments)
                timer = null
            }, delay)
        }
    }

2、节流

连续发送的事件在n秒内只执行一次函数。应用场景（适合大量事件按时间做平均分配触发）：DOM元素拖拽；Canvas画笔功能。

现给一个场景：拖拽一个元素，要随时拿到该元素被拖拽的位置。若直接用drag事件，则会频繁触发，很容易导致卡顿。加了节流后，无论拖拽速度多快，都会每隔固定时间触发一次。

    
    
    
    


    
可拖拽
    

则封装后的节流函数为：

        function throttle(fn, delay = 100){
            let timer = null
            return function(){ 
                if(timer){
                    return
                }
                timer = setTimeout(() => {
                    fn.apply(this, arguments)
                    timer = null
                },delay)
            }
        }