JS-1、防抖和节流

68 阅读1分钟

1. 防抖

防抖规定函数至少间隔多久执行。 代码案例如下:

    function debounce (fn, delay){
        let timer = null; 
        return function (e) {
            if(timer !== null) {
                clearTimeout(timer);
            }
            timer = setTimeout(()=>{
                 fn(e);
             }, delay)
        }
    }

2. 节流

节流规定函数在某时间段内最多执行一次。 代码案例如下:

    function throttle (fn, delay) {
        let start = 0;
        return funtion (e) {
            let nowTime = Date.now();
            if(nowTime - start >= delay) {
                fn(e);
                start = nowTime;
            }
        }
    }

3. 总结

防抖和节流减少的都是事件处理函数的次数,而不是时间调用频率。当只需要处理最后一次触发事件时,使用防抖;当事件触发过于频繁,需要限制调用频率时,使用节流。

注:代码案例都是使用闭包实现防抖和节流。