JS 防抖和节流（节流常用方式及控制第一次和最后一次触发）

最新推荐文章于 2025-03-27 22:50:01 发布

长夜将尽来日可期

最新推荐文章于 2025-03-27 22:50:01 发布

阅读量3.6k

点赞数 2

分类专栏： JS 文章标签： javascript 前端

本文链接：https://blog.csdn.net/Change_xiao/article/details/125268185

版权

JS 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了防抖和节流这两种常见的前端事件处理技术，通过实例阐述了它们如何在浏览器滚动事件中应用。防抖确保在滚动停止后执行一次，而节流则是在指定时间内触发多次，避免频繁操作。还提供了三种节流实现方式，包括定时器和时间戳控制。

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

简单叙述一下防抖和节流的概念

防抖：事件连续多次触发只执行最后一次
节流：事件连续多次触发在单位时间内触发一次（触发多次）

经典案例：
浏览器滚动事件
防抖对应：当鼠标一直在滚动时停止的时候触发（触发一次）
节流对应：当鼠标一直在滚动时每隔单位时间触发（触发多次）

防抖实现

    //防抖
    function debounce(fn, wait) {
        let timer = null;
        return function () {
            if (timer) clearTimeout(timer)
            timer = setTimeout(fn, wait);
        }

节流实现
常用两种实现方式时间戳实现、定时器实现。但这两种都存在弊端
第一次时（刚开始事件）时间戳会在立马就触发定时器则过单位时间触发
最后一次时（刚结束事件）时间戳立马停止触发定时器则过单位时间触发
所以可以结合两者不同控制最后一次和第一次是否触发

    //节流 定时器 (最后一次也触发)
    function throttle1(fn, wait) {
        let timer = null;
        return function () {
            if (!timer) {
                timer = setTimeout(() => {
                    timer = null;
                    fn()
                }, wait);
            }
        }
    }
    //节流 时间戳 (第一次就触发)
    function throttle2(fn, wait) {
        let pre = 0;
        return function () {
            let now = Date.now()
            if (now - pre > wait) {
                fn()
                pre = now
            }
        }
    }
    //节流 控制最后一次和第一次
    function throttle3(fn, wait, op = {}) {
        let timer = null;
        let pre = 0;
        return function () {
            let now = Date.now();
            if (now - pre > wait) {
                if (pre == 0 && !op.bengin) {
                    pre = now
                    return
                }
                if (timer) {
                    clearTimeout(timer)
                    timer = null
                }
                fn()
                pre = now
            } else if (!timer && op.end) {
                timer = setTimeout(() => {
                    fn();
                    timer = null
                }, wait)
            }
        }
    }