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 自动完成脚本整理(33个)
Oct 20 Javascript
详解AngularJS中的依赖注入机制
Jun 17 Javascript
介绍一个简单的JavaScript类框架
Jun 24 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
JavaScript中数组Array.sort()排序方法详解
Mar 01 Javascript
详解angular2实现ng2-router 路由和嵌套路由
Mar 24 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
详解用vue编写弹出框组件
Jul 04 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
在博客园博文中添加自定义右键菜单的方法详解
Feb 05 Javascript
Nest.js环境变量配置与序列化详解
Feb 21 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后台程序与Javascript的两种交互方式
2009/10/25 PHP
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
php中HTTP_REFERER函数用法实例
2014/11/21 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
javascript字母大小写转换的4个函数详解
2014/05/09 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
2016/06/17 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
2016/07/07 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
2016/12/12 Javascript
CKEditor4配置与开发详细中文说明文档
2018/10/08 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
2020/02/16 Javascript
Python深入06——python的内存管理详解
2016/12/07 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
python3转换code128条形码的方法
2019/04/17 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
python的链表基础知识点
2020/09/13 Python
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
后勤采购员岗位职责
2013/12/19 职场文书
校园自助餐厅的创业计划书
2013/12/26 职场文书
《社戏》教学反思
2014/04/15 职场文书
餐饮投资计划书
2014/04/25 职场文书
如何写股份合作协议书
2014/09/11 职场文书
青年文明号汇报材料
2014/12/23 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
信息技术研修心得体会
2016/01/08 职场文书
财务年终工作总结大全
2019/06/20 职场文书
Mysql Online DDL的使用详解
2021/05/20 MySQL
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis