Vue.js页面中有多个input搜索框如何实现防抖操作


Posted in Javascript onNovember 04, 2019

debounce简介

debounce是lodash工具库中的一个非常好用的函数。在实现搜索框对输入进行动态查询的时候,我们需要防止前端频繁的发送查询请求给后端,这个时候就需要用到debounce,它可以设置一个时间间隔,比如300ms,忽略300毫秒内的输入变化。debounce的详细介绍可以参考 这篇 文章。

debounce的高级用法

博主的页面中有3个搜索框,每个搜索框都需要动态响应用户的输入到后台去查询匹配的文章,如下图:

Vue.js页面中有多个input搜索框如何实现防抖操作 

在Vue.js中如何实现多搜索框的debounce绑定,下面博主就带大家一起来看一下:

1. 监听输入变量

上图,可以看到我有3个输入框,每个输入框都需要设置一个变量来保存用户的输入:

data () {
 return {
 // 可用的文章列表
 columnItems: [],
 // 是否正在加载
 isLoading: [false, false, false],
 // 选择框搜索输入的值
 searchColumn1: '',
 searchColumn2: '',
 searchColumn3: ''
 }
 },

接下来,我们把输入变量绑定到输入框上面。博主这里使用的是vuetify的combobox,如果使用html原生的input框或者其他框架的input元素,此处请稍作修改:

<label>推荐专栏1</label>
 <v-combobox :items="columnItems"
 :loading="isLoading[0]"
 :search-input.sync="searchColumn1"
 ...
 >
 ...
 </v-combobox>
 <label>推荐专栏2</label>
 <v-combobox
 :items="columnItems"
 :loading="isLoading[1]"
 :search-input.sync="searchColumn2"
 ...
 >
 ...
 </v-combobox>
 <label>推荐专栏3</label>
 <v-combobox
 :items="columnItems"
 :loading="isLoading[2]"
 :search-input.sync="searchColumn3"
 ...
 >
 ...
 </v-combobox>

然后,我还需要监听这几个变量,如果发生改变则调用ajax进行后台查询:

watch: {
 searchColumn1 (val) {
 this.getColumns(val, 0)
 },
 searchColumn2 (val) {
 this.getColumns(val, 1)
 },
 searchColumn3 (val) {
 this.getColumns(val, 2)
 }
 },
 ...
 methods: {
 getColumns: function (searchValue, index) {
 // Items have already been requested
 if (this.isLoading[index]) return
 this.isLoading[index] = true
 let vm = this
 let options = {
 page: 1
 }
 if (searchValue) {
 options.title = searchValue.trim()
 } else {
 vm.columnItems = []
 vm.isLoading[index] = false
 return
 }
 // console.log(options)
 vm.$store.dispatch('getAllColumns', options).then(function (columns) {
 if (columns && columns.length) {
 vm.columnItems = columns
 }
 vm.isLoading[index] = false
 })
 }
 }

2. 添加debounce绑定

到目前为止,我们都还没有添加debounce,上面的逻辑也完全走的通,但是运行后你会发现输入操作运行的不流畅,如果打开dev-tools查看后台调用,你会发现用户输入后出发了一长串的ajax调用。因此我们引入debounce。此处,我们只需把含有ajax调用的函数提交给debounce,告诉它对getColumns()函数进行防抖操作。而在何处调用debounce则是非常有讲究的,错误的引入位置会使得debounce不起作用。请记住,debounce需要在created()钩子中引入。

import _ from 'lodash'
 ...
 created: function () {
 this.getColumns = _.debounce(this.getColumns, 500)
 },

最后,博主想抛出一个小问题:“为什么一定要在created()钩子中调用debounce呢,mounted()或者其他的地方为什么不可以呢?”,请知道的同学留言或者发评论给我吧!

 转自:https://www.bloghome.com.cn/user/xionghaizi

作者: 熊孩子

Javascript 相关文章推荐
解析JavaScript中的不可见数据类型
Dec 02 Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 Javascript
iframe跨域通信封装详解
Aug 11 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 Javascript
H5手机端多文件上传预览插件
Apr 21 Javascript
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 Javascript
浅谈layui分页控件field参数接收对象的问题
Sep 20 Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 #Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 #jQuery
JS立即执行的匿名函数用法分析
Nov 04 #Javascript
小程序如何自主实现拦截器的示例代码
Nov 04 #Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 04 #Javascript
JavaScript判断浏览器版本的方法
Nov 03 #Javascript
JavaScript算法学习之冒泡排序和选择排序
Nov 02 #Javascript
You might like
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
php定界符
2014/06/19 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
js创建对象的方式总结
2015/01/10 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
bootstrapValidator表单验证插件学习
2016/12/30 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
vuex实现购物车的增加减少移除
2020/06/28 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
Python实现栈的方法
2015/05/26 Python
python实现音乐下载器
2018/04/15 Python
python实战串口助手_解决8串口多个发送的问题
2019/06/12 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
python实现学生成绩测评系统
2020/06/22 Python
a标签下载链接的简单实现
2016/09/13 HTML / CSS
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
Ego Shoes官网:英国时髦鞋类品牌
2020/10/19 全球购物
文员岗位职责
2013/11/09 职场文书
乡村文明行动实施方案
2014/03/29 职场文书
团支部推优材料
2014/05/21 职场文书
我的中国梦演讲稿400字
2014/08/19 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
2014年评职称工作总结
2014/11/20 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
活动费用申请报告
2015/05/15 职场文书
辩护词范文大全
2015/05/21 职场文书
python绘图subplots函数使用模板的示例代码
2021/04/30 Python
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android