如何实现：防抖、节流？

yuroll

已于 2023-03-27 22:50:43 修改

阅读量83

点赞数

分类专栏： # 防抖&节流文章标签： vue.js javascript 前端

于 2023-03-22 13:53:30 首次发布

本文链接：https://blog.youkuaiyun.com/yuroll/article/details/129697485

版权

防抖&节流专栏收录该内容

2 篇文章

订阅专栏

文章介绍了在Vue组件中如何安装和引入lodash库，特别是按需加载功能。重点讲解了使用lodash的throttle和debounce方法来优化性能，避免频繁调用函数，同时提醒注意在定义回调函数时避免使用箭头函数以保持正确的this上下文。

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

1、安装 lodash 依赖

npm install lodash -S，一般vue的node_modules依赖包自带lodash插件

2、组件中，引入lodash

//把lodash全部功能函数引入
import _ from 'lodash';
//最好的引入是，按需加载。。默认暴露的，含default，无需{}
import throttle from 'lodash/throttle';

3、使用loadsh中的，throttle 和 debounce 方法

 methods:{
    //throttle两个参数，第一个参数为回调函数，第二个参数是延迟时间delay
    //其中回调函数尽量不要用箭头函数，容易出现this指向问题
    changeIndex:throttle(function(index){
      this.currentIndex = index; //节流的业务逻辑
    },100)
  },