JavaScript节流与防抖函数封装

js节流与防抖函数封装

常见应用场景：

• window的 resize 和 scroll 事件；
• 文字输入时的 keyup 事件；
• 元素拖拽、移动时的 mousemove 事件；

防抖

• 定义：多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行
• 原理：对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。
• 经典案例：百度输入内容自动搜索

    /**
    *防抖函数
    *@param fn 事件触发的操作
    *@param delay 多少毫秒内连续触发事件，不会执行
    *@returns {Function}
    */
    function debounce(fn,delay){
        let timer = null;
        return function(){
            let self = this,
                args = arguments;
            timer && clearTimeout(timer);
            timer = setTimeout(function(){
                fn.apply(self,args);
            },delay);
        }
    }
    window.onscroll = debounce(function(){
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        console.log(scrollTop)
    },200)

　　

节流

• 定义：触发函数事件后，短时间间隔内无法连续调用，只有上一次函数执行后，过了规定的时间间隔，才能进行下一次的函数调用。
• 原理：对处理函数进行延时操作，通过设定时间片，控制事件函数间断性的触发。
• 经典案例：按钮可以多次点击发送请求问题

    /**
    * 节流函数
    * @param fn 事件触发的操作
    * @param mustDelay 间隔多少毫秒需要触发一次事件
    */
    function throttle(fn,mustDelay){
        let timer,
            start = 0;
        return function (){
            let now = new Date().getTime(),
                self = this,
                args = arguments;
            if(now > start + mustDelay){
                fn.apply(self,args)
                start = now;
            }
        }
    }
    window.onscroll =throttle(function(){
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        console.log(scrollTop)
    },200)