Vue中使用lodash的debounce实现防抖

场景:当用户在输入框中键入内容时,我们要完成搜索框联想功能,直接监听用户输入的内容会频繁的触发事件发送请求,给服务器和浏览器增加负担。为了提高性能并减少不必要的请求我们可以使用lodash库中的debounce函数来实现输入防抖。

步骤

步骤1:安装lodash

首先,确保你的项目中已经安装了lodash:

bash 复制代码
npm install lodash
# 或者
yarn add lodash

步骤2:导入lodash和Vue

javascript 复制代码
在Vue组件中导入lodash:
<script>
import lodash from 'lodash';
export default {
  // 组件的其他配置
}
</script>

步骤3:设置防抖函数

假如我有这么一个组件

html 复制代码
<!-- 基于element-ui -->
<el-input
  :value="query.keyword"
  placeholder="请输入内容"
  prefix-icon="el-icon-search"
  @input="keywordChange"
/>
javascript 复制代码
//截取部分代码
export default {
  data() {
    return {
      query: {
        page: 1,
        pagesize: 10,
        keyword: '',// 查询的内容
        departmentId: 1
      },
      ...
    },
    ...
  },
  ...
}

现在我们需要通过监听用户输入来向服务器发送请求渲染搜索结果

正确写法

在watch中监听query对象中的 keyword 属性(也就是输入的内容)。

javascript 复制代码
...
  watch: {
    // 第一个是回调函数,第二个是防抖动的时间毫秒数
    'query.keyword': lodash.debounce(function(newVal) {
      this.getUserList(newVal) // 携带新的数据发送请求,获取员工列表
    }, 300)
  },
  methods:{
    ...
    // 处理搜索关键字变化事件
    keywordChange(e) {
      this.query.keyword = e // 修改搜索关键字
      this.query.page = 1 // 跳转到第一页
    },
  }
  

效果

持续输入300毫秒内只触发了最后一次

请求防抖

错误写法

不进行调用

html 复制代码
<!-- 基于element-ui -->
<el-input
  :value="query.keyword"
  placeholder="请输入内容"
  prefix-icon="el-icon-search"
  @input="keywordChange"
/>
javascript 复制代码
  ...
  methods:{
    ...
    // 处理搜索关键字变化事件
    keywordChange(e) {
      this.query.keyword = e // 修改搜索关键字
      this.query.page = 1 // 跳转到第一页
    },
  }
  

效果

没有发出请求

原因 :_.debounce() 返回值是一个函数 ,需要被调用

直接写在@input事件中

html 复制代码
<!-- 基于element-ui -->
<el-input
  :value="query.keyword"
  placeholder="请输入内容"
  prefix-icon="el-icon-search"
  @input="keywordChange"
/>
javascript 复制代码
keywordChange(e) {
  //触发事件后修改内容
  this.query.keyword = e
  this.query.page = 1
  //发送请求 防抖 ?
  const fn = lodash.debounce(() => {
    console.log(this.query.keyword)
    this.getUserList()
  }, 800)
  fn()
},

先来看效果

请求

这样看来似乎只是延迟检测输入内容了,但是还是发送了n(修改次数次)请求

原因 :代码中每次调用 keywordChange 都会创建一个新的防抖函数,而不是在多次调用之间共享同一个防抖函数。这会导致防抖效果无法实现,因为每次都会创建一个新的防抖实例。

相关推荐
mCell2 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip2 小时前
Node.js 子进程:child_process
前端·javascript
excel5 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel6 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼8 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping8 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙9 小时前
[译] Composition in CSS
前端·css
白水清风9 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix9 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278009 小时前
new、原型和原型链浅析
前端·javascript