在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 textarea的长度进行验证
May 06 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
Mar 12 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
基于Vuejs和Element的注册插件的编写方法
Jul 03 Javascript
vue.js路由跳转详解
Aug 28 Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 Javascript
Vue的双向数据绑定实现原理解析
Feb 17 Javascript
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
canvas绘制折线路径动画实现
May 12 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
检查php文件中是否含有bom的函数
2012/05/31 PHP
php实现URL加密解密的方法
2016/11/17 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
JS的replace方法介绍
2012/10/20 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
盘点javascript 正则表达式中 中括号的【坑】
2016/03/16 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
SIXPAD智能健身仪英国官网:革命性的训练装备品牌
2018/09/27 全球购物
建筑行业的大学生自我评价
2013/12/08 职场文书
采购部经理岗位职责
2014/02/10 职场文书
航海技术专业毕业生求职信
2014/04/06 职场文书
安全教育演讲稿
2014/05/09 职场文书
会计演讲稿范文
2014/05/23 职场文书
班级读书活动总结
2014/06/30 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
批评与自我批评发言稿
2014/10/15 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书
安全生产警示教育活动总结
2015/05/09 职场文书
敬老院活动感想
2015/08/07 职场文书
安全生产协议书
2016/03/22 职场文书