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 都会创建一个新的防抖函数,而不是在多次调用之间共享同一个防抖函数。这会导致防抖效果无法实现,因为每次都会创建一个新的防抖实例。

相关推荐
y先森44 分钟前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy44 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189111 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿2 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡3 小时前
commitlint校验git提交信息
前端
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒4 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员4 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐4 小时前
前端图像处理(一)
前端