防抖(Debounce)和节流(Throttle)的区别和应用场景

防抖(Debounce)和节流(Throttle)虽然都是用来限制函数的执行频率,但它们的实现方式和应用场景有所不同。以下是两者的主要区别:

1. 执行原理

  • 防抖(Debounce)

    • 执行条件:在指定的延迟时间内,如果函数再次被触发,计时器会重新计时,直到延迟时间结束且没有新的触发时,函数才会执行。
    • 效果:确保函数在一段时间内只会执行一次,并且是事件触发后的最后一次。适用于希望在一连串事件结束后执行某个操作的场景。
  • 节流(Throttle)

    • 执行条件:在指定的时间间隔内,函数只会执行一次,无论该时间间隔内事件被触发了多少次。
    • 效果:确保函数在一定时间内最多执行一次。适用于控制持续触发事件的执行频率,防止函数执行过于频繁。

2. 使用场景

  • 防抖(Debounce)

    • 适用于需要在一段时间内等到所有触发事件都完成后再执行函数的场景。
    • 典型应用:搜索框自动补全、窗口大小调整(resize)、表单输入验证。
    • 示例:用户停止输入后的搜索请求发送。
  • 节流(Throttle)

    • 适用于需要定期执行某个函数,而不是立即执行的场景。
    • 典型应用:滚动事件(scroll)、页面滚动加载、按钮重复点击。
    • 示例:限制滚动事件的触发频率。

3. 代码对比

  • 防抖

    • 每次事件触发都会重置计时器,只有在延迟时间结束后且没有新事件触发,函数才会执行一次。
    javascript 复制代码
    function debounce(func, delay) {
        let timer;
        return function (...args) {
            clearTimeout(timer);
            timer = setTimeout(() => {
                func.apply(this, args);
            }, delay);
        };
    }
  • 节流

    • 在设定的时间间隔内,函数只能执行一次。即使多次触发,函数也不会立即执行,而是在规定的时间间隔后执行一次。
    javascript 复制代码
    function throttle(func, limit) {
        let lastFunc;
        let lastRan;
        return function (...args) {
            const context = this;
            if (!lastRan) {
                func.apply(context, args);
                lastRan = Date.now();
            } else {
                clearTimeout(lastFunc);
                lastFunc = setTimeout(() => {
                    if ((Date.now() - lastRan) >= limit) {
                        func.apply(context, args);
                        lastRan = Date.now();
                    }
                }, limit - (Date.now() - lastRan));
            }
        };
    }

总结

  • 防抖关注的是在一连串事件结束后执行一次(等待时间内如果有新事件触发就重新计时),强调"最后一次执行"。
  • 节流关注的是在指定时间间隔内执行一次(无论期间有多少次触发),强调"定期执行"。

根据实际需求选择合适的技术,可以有效提升应用的响应速度和用户体验。

相关推荐
2401_853448232 分钟前
C嘎嘎类里面的额函数
c语言·开发语言·c++
sen_shan11 分钟前
Vue3+Vite+TypeScript+Element Plus开发-04.静态菜单设计
前端·javascript·typescript·vue3·element·element plus·vue 动态菜单
巷北夜未央12 分钟前
数据结构之二叉树Python版
开发语言·数据结构·python
旧识君35 分钟前
移动端1px终极解决方案:Sass混合宏工程化实践
开发语言·前端·javascript·前端框架·less·sass·scss
郝YH是人间理想1 小时前
OpenCV基础——傅里叶变换、角点检测
开发语言·图像处理·人工智能·python·opencv·计算机视觉
Tiger Z1 小时前
R 语言科研绘图第 36 期 --- 饼状图-基础
开发语言·程序人生·r语言·贴图
ElasticPDF-新国产PDF编辑器1 小时前
Angular use pdf.js and Elasticpdf tutorial
javascript·pdf·angular.js
揣晓丹1 小时前
JAVA实战开源项目:校园失物招领系统(Vue+SpringBoot) 附源码
java·开发语言·vue.js·spring boot·开源
吃没吃1 小时前
vue2.6-源码学习-Vue 核心入口文件分析
前端
Carlos_sam1 小时前
Openlayers:海量图形渲染之图片渲染
前端·javascript