防抖和节流简单代码

最新推荐文章于 2022-08-09 14:02:03 发布

老王可喜欢你了

最新推荐文章于 2022-08-09 14:02:03 发布

阅读量975

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_48333948/article/details/110921281

版权

本文介绍了JavaScript中的防抖(debounce)和节流(throttle)技术。防抖在持续触发事件时，合并事件并在停止触发后一定时间执行，而节流则保证在连续触发事件时，每隔固定时间执行一次。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

防抖

debounce（防抖），简单来说就是防止抖动。

当持续触发事件时，debounce 会合并事件且不会去触发事件，当一定时间内没有触发再这个事件时，才真正去触发事件。

export function debounce(fn, delay) {
    var delay = delay || 200;
    var timer;
    return function () {
        var th = this;
        var args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            timer = null;
            fn.apply(th, args);
        }, delay);
    };
}

节流

throttle（节流），当持续触发事件时，保证隔间时间触发一次事件。

持续触发事件时，throttle 会合并一定时间内的事件，并在该时间结束时真正去触发一次事件。

export function throttle(fn, interval) {
    var last;
    var timer;
    var interval = interval || 200;
    return function () {
        var th = this;
        var args = arguments;
        var now = +new Date();
        if (last && now - last < interval) {
            clearTimeout(timer);
            timer = setTimeout(function () {
                last = now;
                fn.apply(th, args);
            }, interval);
        } else {
            last = now;
            fn.apply(th, args);
        }
    }
}