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 相关文章推荐
Flash对联广告的关闭按钮讨论
Jan 30 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
js实现人民币大写金额形式转换
Apr 27 Javascript
一分钟理解js闭包
May 04 Javascript
AngularJS 指令的交互详解及实例代码
Sep 14 Javascript
AngularJS中的DOM操作用法分析
Nov 04 Javascript
Vue.js组件通信的几种姿势
Oct 23 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
Aug 10 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
php全排列递归算法代码
2012/10/09 PHP
9段PHP实用功能的代码推荐
2014/10/14 PHP
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
浅析Javascript使用include/require
2013/11/13 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
Javascript的闭包详解
2014/12/26 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
django定期执行任务(实例讲解)
2017/11/03 Python
Python使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码
2018/03/04 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
简单了解python元组tuple相关原理
2019/12/02 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
python 发送get请求接口详解
2020/11/17 Python
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
教师业务学习制度
2014/01/25 职场文书
家居饰品店创业计划书
2014/01/31 职场文书
博士生专家推荐信
2014/09/26 职场文书
接收函格式
2015/01/30 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
2015年幼儿教师个人工作总结
2015/05/20 职场文书
高中团支书竞选稿
2015/11/21 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android