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

相关推荐
csj50几秒前
前端基础之《React(1)—webpack简介》
前端·react
被巨款砸中4 分钟前
前端 20 个零依赖浏览器原生 API 实战清单
前端·javascript·vue.js·web
文韬_武略23 分钟前
web vue之状态管理Pinia
前端·javascript·vue.js
mosen86830 分钟前
【Vue】Vue Router4x关于router-view,transtion,keepalive嵌套写法报错
前端·javascript·vue.js
写不来代码的草莓熊1 小时前
vue前端面试题——记录一次面试当中遇到的题(5)
前端
weixin_ab2 小时前
【HTML分离术】
前端·html
文心快码BaiduComate2 小时前
新手该如何选择AI编程工具?文心快码Comate全方位体验
前端·后端·程序员
夫唯不争,故无尤也2 小时前
Tomcat 内嵌启动时找不到 Web 应用的路径
java·前端·tomcat
lichong9512 小时前
【Xcode】Macos p12 证书过期时间查看
前端·ide·macos·证书·xcode·大前端·大前端++
oh,huoyuyan2 小时前
如何在火语言中指定启动 Chrome 特定用户配置文件
前端·javascript·chrome