基于Vue中使用节流Lodash throttle详解


Posted in Javascript onOctober 30, 2019

在Vue中使用 Lodash.throttle 来做节流

在Vue中,有时需要对ajax请求提交进行节流操作.这时候,如果页面在请求成功之后会跳转,使用vue指令once或者加载一个loading遮罩禁止点击即可,但如果请求之后不跳转,并且loading不适用时,需要通过其他方式来实现节流,比如通过标识位判断等,这里我们着重说一下如何通过lodash.throttle来实现节流

lodash

lodash是一个广受欢迎的js工具库,其中包含了各种各样的工具函数,方便开发时不需要反复造轮子,更关注于业务.目前已经是4.x版本,文档也十分好找lodash中文文档

_.throttle

这是lodash中的节流函数,具体作用可以直接看官方文档,这里不再进行解释

说下在vue中具体怎么用

首先上错误用法

import _ from 'lodash'

export default{
 methods:{
 click(){
  _.throttle(()=>{
   console.log('hello')
  },1000)
 }
 }
}

以上这样写,在执行时候并不会打印console

正确用法

import _ from 'lodash'

export default{
 methods:{
 click:_.throttle(function(){
   console.log('hello')
   console.log(this)
 },1000)
 }
}

在lodash的throttle方法中,可以直接使用function,而且额外的好处是无需重新指向this,在函数内部中,已经做了apply,所以这里的this指向的就是vue实例,这样对已有函数的改造也是十分的方便,外面包一层_.throttle就可以了!

以上这篇基于Vue中使用节流Lodash throttle详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解析js原生方法创建表格效率测试
Jul 08 Javascript
javascript中parentNode,childNodes,children的应用详解
Dec 17 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
详解js的视频和音频采集
Aug 09 Javascript
详解小程序设置缓存并且不覆盖原有数据
Apr 15 Javascript
深入浅析vue中cross-env的使用
Sep 12 Javascript
详解Node.js使用token进行认证的简单示例
May 25 Javascript
浅谈es6中的元编程
Dec 01 Javascript
Vue最新防抖方案(必看篇)
Oct 30 #Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 30 #Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 #Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 #Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 #Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 #Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 #Javascript
You might like
追求程序速度,而不是编程的速度
2008/04/23 PHP
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
php利用smtp类实现电子邮件发送
2015/10/30 PHP
thinkPHP5.0框架开发规范简介
2017/03/25 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
JavaScript 拾漏补遗
2009/12/27 Javascript
基于jquery的loading效果实现代码
2010/11/05 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
值得分享的JavaScript实现图片轮播组件
2016/11/21 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
Bootstrap4如何定制自己的颜色和风格
2018/02/26 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
解决jquery有正确返回值但不执行success函数的问题
2018/08/20 jQuery
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
wxpython 学习笔记 第一天
2009/03/16 Python
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
Python实现的简单发送邮件脚本分享
2014/11/07 Python
wxPython实现绘图小例子
2019/11/19 Python
如何基于python操作excel并获取内容
2019/12/24 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
详解HTML5表单新增属性
2016/12/21 HTML / CSS
毕业生个人的求职信范文
2013/12/03 职场文书
护理见习报告范文
2014/11/03 职场文书
委托书的样本
2015/01/28 职场文书
召开会议通知范文
2015/04/15 职场文书
欢送会主持词
2015/07/01 职场文书
mysql在项目中怎么选事务隔离级别
2021/05/25 MySQL
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python