在vue+element ui框架里实现lodash的debounce防抖


Posted in Javascript onNovember 13, 2019

事情起因在:我使用element ui框架里的远程搜索框,在单选时,组件内部已经做了防抖,query是在一段时间内的字符串。但是在多选时,并没有做防抖,而是每输入一个字符都要向后台发一次请求,所以必须防抖,官方推荐使用lodash的debounce

在解决这个问题时,我遇到的坎儿主要有以下:

我首先在项目里用npm安装lodash,先全局安装,然后安装到项目

npm install -g lodash
npm install --save lodash

安装后,我就在我要用防抖的组件里,引入lodash

var lodash = require('lodash');

以下就开始了走弯路

我百度后,查询到debounce总和keyup一起使用,所以我就在我的搜索框里绑定了keyup事件,但是绑定的事件并没有生效,通过查询得知,在element ui封装了input,所以要在后面加上.native才可以覆盖原来的事件

<el-select
  v-model="AddCandidateFrom.follow_hr"
  filterable
  multiple
  placeholder="请选择跟进HR"
  @keyup.native="getRemoteFollow"
  :loading="followLoading"
  class="select-item">
  <el-option
    v-for="item in followOption"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

keyup成功绑定事件后,我发现得到的结果并不是我想要的,因为keyup绑定事件里得到的参数是我在键盘里输入的一个字符,但我想要得到的是输入后的整个字符串。所以我就又开始使用watch监听this.AddCandidateFrom.follow_hr

监听this.AddCandidateFrom.follow_hr后,我发现并没有用,因为它代表的是多选框中已经选中了的字符串,正在输入的字符串不会记录进去,所以我又回退到使用远程搜索本身的方法,绑定remote-methods

<el-select
  v-model="AddCandidateFrom.follow_hr"
  filterable
  multiple
  remote
  placeholder="请选择跟进HR"
  :remote-method="getRemoteFollow"
  :loading="followLoading"
  class="select-item">
  <el-option
    v-for="item in followOption"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

绑定了remote-method方法后,我就使用传统的方法定义绑定的方法(),没有使用es6简写的方法,这是因为,使用lodash.debounce返回的是一个函数。如果有参数,则在function空的形参列表里加入

getRemoteFollow: lodash.debounce(function () {
  console.log('111');
}, 300),

以上这篇在vue+element ui框架里实现lodash的debounce防抖就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
javascript 中的 delete及delete运算符
Nov 15 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
详细分析Javascript中创建对象的四种方式
Aug 17 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
angular过滤器实现排序功能
Jun 27 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
javascript系统时间设置操作示例
Jun 17 Javascript
微信小程序实现翻牌抽奖动画
Sep 21 Javascript
element实现合并单元格通用方法
Nov 13 #Javascript
vue之debounce属性被移除及处理详解
Nov 13 #Javascript
Vue的click事件防抖和节流处理详解
Nov 13 #Javascript
vue表单数据交互提交演示教程
Nov 13 #Javascript
解决vuex数据异步造成初始化的时候没值报错问题
Nov 13 #Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 #Javascript
基于vue-cli3和element实现登陆页面
Nov 13 #Javascript
You might like
phpMyAdmin 安装及问题总结
2009/05/28 PHP
php数组中删除元素的实现代码
2012/06/22 PHP
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
php链式操作的实现方式分析
2019/08/12 PHP
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
Python实现的生成自我描述脚本分享(很有意思的程序)
2014/07/18 Python
利用Psyco提升Python运行速度
2014/12/24 Python
Python中实现参数类型检查的简单方法
2015/04/21 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
python使用建议与技巧分享(一)
2020/08/17 Python
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
大学生的网络创业计划书
2013/12/26 职场文书
11月红领巾广播稿
2014/01/17 职场文书
党员活动日总结
2014/05/05 职场文书
机关职员工作检讨书
2014/10/23 职场文书
党员个人自我评价
2015/03/03 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript
TV动画《间谍过家家》公开PV
2022/03/20 日漫
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers