节流与防抖原理及实现

函数防抖与节流技术解析及应用场景

最新推荐文章于 2025-10-29 20:16:36 发布

原创最新推荐文章于 2025-10-29 20:16:36 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #前端

本文深入探讨了函数防抖和节流的概念，防抖技术用于限制频繁操作，确保在最后一次触发后执行，常用于输入搜索联想、点赞功能。节流则按照固定间隔执行，适用于滚动事件、DOM操作，以避免性能问题。文中提供了防抖和节流的实现示例，并分析了它们在实际开发中的应用策略。

简述：

（1）防抖：就是将一段时间内连续的多次触发转化为一次触发。

（2）节流：减少一段时间内触发的频率

区别：两者区别在于函数节流是固定时间做某一件事，比如每隔1秒发一次请求。而函数防抖是在频繁触发后，只执行一次（两者的前提都是频繁触发）

场景：

（1）节流：一般是onrize，onscroll等这些频繁触发的函数，比如你想获取滚动条的位置，然后执行下一步动作；鼠标不断点击触发，mousedown(单位时间内只触发一次)…

比如你想获取滚动条的位置，然后执行下一步动作。如果监听后执行的是Dom操作，这样的频繁触发执行，可能会影响到浏览器性能，甚至会将浏览器卡崩。
我们可以规定他多少秒执行一次，这种方法叫函数节流
 const throttle=(fn, delay) => {
    //记录上一次函数触发的时间
    let lastTime = 0;
    return () => {
        //记录当前函数触发的时间
        let nowTime = Date.now();
        if (nowTime - lastTime > delay) {
            fn();
            //同步时间
            lastTime = nowTime;
        }
    }
};

（2）防抖：频繁操作点赞和取消点赞，因此需要获取最后一次操作结果并发送给服务器；search搜索联想，用户在不断输入值时…

const debounce=(fn, delay) => {
    //记录上一次的延时器
    let timer = null;
    return () => {
        //清除上一次延时器
        clearTimeout(timer);
        //重新设置新的延时器
        timer = setTimeout(() => {
            fn()
        }, delay)
    }
};