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 30 Javascript
qTip2 精致的基于jQuery提示信息插件
Feb 17 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
Dec 16 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 Javascript
javascript实现的猜数小游戏完整实例代码
May 10 Javascript
浅谈JS之iframe中的窗口
Sep 13 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
JavaScript实现修改伪类样式
Nov 27 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
es6函数之尾调用优化实例分析
Apr 25 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 CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
jQuery学习基础知识小结
2010/11/25 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
Python 获取当前所在目录的方法详解
2017/08/02 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
python实现字符串和字典的转换
2018/09/29 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
python中的itertools的使用详解
2020/01/13 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
业务部经理岗位职责
2014/01/04 职场文书
党风廉政建设调研报告
2015/01/01 职场文书
团干部培训班心得体会
2016/01/06 职场文书
幼儿园教学反思范文
2016/03/02 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书
tensorflow+k-means聚类简单实现猫狗图像分类的方法
2021/04/28 Python
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python
python 如何做一个识别率百分百的OCR
2021/05/29 Python
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技
Python Matplotlib绘制动画的代码详解
2022/05/30 Python