Vue 函数的防抖与节流

最新推荐文章于 2025-02-19 23:47:44 发布

编程界的冠希

最新推荐文章于 2025-02-19 23:47:44 发布

阅读量932

点赞数 1

分类专栏： VUE 文章标签： vue

本文链接：https://blog.youkuaiyun.com/m0_65262198/article/details/123771033

版权

17 篇文章

订阅专栏

本文探讨了在Vue项目中如何实现事件处理的防抖与节流技术，以提升性能并防止浏览器卡顿。防抖确保在规定时间后的最后一次操作执行，而节流则限制在一定间隔内触发回调的频率。推荐使用lodash库来实现这些功能，并介绍了lodash的引入和使用方法。

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

在正常使用情况下:事件触发非常频繁，而且每一次的触发，回调函数都要去执行(如果时间很短，而回调函数内部有计算，那么很可能出现浏览器卡顿)。

节流:在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，用户操作很频繁，但是把频繁的操作变为少量操作[可以给浏览器有充裕的时间解析代码]

防抖:前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，用户操作很频繁，但是只是执行一次解决方法可以用（闭包加定时器）

lodash提供了防抖以及节流函数（也可以对数组进行操作类似于去重等）

引入方法

//全部引入
import _ from 'lodash'

//按需引入 只引入节流函数 throttle
import throttle from 'lodash/throttle'

使用方法 (throttle回调函数别用箭头函数，可能出现上下文this问题)

xxx为你所定义的methods中的函数 _是lodash对象 此处使用的是ES5的写法

    xxx:throttle(function(){
            ...... //此处正常书写你的函数逻辑和操作
        },50),