防抖和节流

前端 · 2022-07-01 ·

防抖和节流是前端世界里经常遇到的性能优化技术点,一般在开发的过程中可以借助 lodash 工具库实现,但是我们也需要了解内部原理及如何使用:

防抖

一系列的事件只以最后一次操作为准!
可以使用 setTimeout 来实现防抖功能:

function debounce(fn, delay){
    let timer;
    return (...args) => {
        if(timer){
            clearTimeout(timer);
        }
        // 重新调用 setTimeout
        timer = setTimeout(()=>{
            fn.apply(this, args);
        }, delay);
    }
}

常见的案例

  • 输入框联想搜索商品
    会短时间内监听最后一次输入,这样可以减少对后端服务器的压力

节流

一系列的事件只以第一次操作为准(一段时间内最多只会执行一次)

涉及时间,所以判断当前时间和上一次操作的时间建构是否符合节流时间,如果在时间内则不执行,否则重新执行方法并刷新下次限定的时间:

function throttle(fn, delay){
    let timeout = 0;
    return (...args) =>{
        const now = +Date.now();
        if(now > timeout + delay) {
            timeout = now;
            fn.apply(this, args);
        }
    }
}

常见的案例:

  • 监听滑动
%