JavaScript 防抖，节流

最新推荐文章于 2024-08-05 09:16:16 发布

原创最新推荐文章于 2024-08-05 09:16:16 发布 · 675 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了防抖和节流两种常见的前端性能优化技术，通过实例展示了它们的概念、原理和应用场景，包括用户频繁操作的防抖用于减少请求，滚动事件的节流以提高效率。

防抖

1. 概念
防抖具体指的是某个函数在某段时间内，无论触发了多少次回调，都只执行最后一次。假如我们设置了一个等待时间 3 秒的函数，在这 3 秒内如果遇到函数调用请求就重新计时 3 秒，直至新的 3 秒内没有函数调用请求，此时执行函数，不然就以此类推重新计时
2. 原理
防抖实现原理就是利用定时器，函数第一次执行时设定一个定时器，并且通过闭包缓存起来，之后调用时发现已经设定过定时器就清空之前的定时器，并重新设定一个新的定时器，如果存在没有被清空的定时器，当定时器计时结束后触发函数执行。

/*
 * 防抖函数
 * @param fn 事件触发的操作
 * @param delay 多少毫秒内连续触发事件，不会执行
 * @returns {Function}
*/
function debounce(fn,delay) {
    let timer = null; //通过闭包缓存了一个定时器
    return function () {
        const args = [...arguments];
        const that = this
        timer && clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(that,args);
        },delay);
    }
}
window.onscroll = debounce(function () {
    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    console.log('滚动条位置：' + scrollTop);
},200)

节流

节流有多种不同应用场景的表现形式，一般可以分为三种，分别是首节流，尾节流，兼顾型节流。

首节流，第一次会马上执行，之后的操作不一定会执行。可以理解问第一次执行，最后一次不执行。
尾节流，第一次不会马上执行，而是一段时间后在执行。可以理解为第一次不执行，最后一次执行。
兼顾型节流，第一次会马上执行，最后一次也会执行。

首节流

function throttle(fn, delay){
    let last=0;
    return function(){
        let now=Date.now();
        if(now-last>delay){
            fn.apply(this, arguments);
            last=now;
        }
    }
}

尾节流

// 写法一
function throttle(fn, delay) {
    let timer = null;
    return function () {
        let context = this; 
        let args = arguments;
        if (!timer) {
            timer = setTimeout(function () {
                fn.apply(context, args);
                timer = null;
            }, delay);
        }
    }
}
// 写法二
/**
 * 节流函数
 * @param fn 事件触发的操作
 * @param delay 间隔多少毫秒需要触发一次事件
 * @returns {Function}
 */
function throttle(fn, delay) {
    let flag = true;
    return function () {
        if (!flag) {
            return;
        }
        const that = this
        const args = [...arguments];
        flag = false;
        setTimeout(() => {
            fn.apply(that, args);
            flag = true;
        }, delay);
    }
}
window.onscroll = throttle(function () {
    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    console.log('滚动条位置：' + scrollTop);
},200)

兼顾型节流

function throttle(fn, delay){
    let last=0;
    let timer=null;

    return function(){
        let now=Date.now();
        let reming=delay-(now-last);

        clearTimeout(timer);
        if(reming<0){
            fn.apply(this, arguments);
            last=now;
        }else{
            timer=setTimeout(()=>{
                fn.apply(this,arguments);
            }, reming);
        }
    }
}