基于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 相关文章推荐
如何做到打开一个页面,过几分钟自动转到另一页面
Apr 20 Javascript
JS常用正则表达式总结
Nov 12 Javascript
JavaScript 学习笔记之语句
Jan 14 Javascript
jQuery修改class属性和CSS样式整理
Jan 30 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
Aug 13 Javascript
浅谈js中的变量名和函数名重名
Feb 13 Javascript
Javascript中的async awai的用法
May 17 Javascript
纯js实现隔行变色效果
Nov 29 Javascript
element-ui 表格数据时间格式化的方法
Aug 24 Javascript
Vue使用localStorage存储数据的方法
May 27 Javascript
ckeditor一键排版功能实现方法分析
Feb 06 Javascript
Vue中qs插件的使用详解
Feb 07 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
PHP5 安装方法
2006/10/09 PHP
PHP 危险函数全解析
2009/09/09 PHP
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
jquery之Document元素选择器篇
2008/08/14 Javascript
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
2013/02/04 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
Typescript的三种运行方式(小结)
2019/09/18 Javascript
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
react项目从新建到部署的实现示例
2021/02/19 Javascript
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
Python连接SQLServer2000的方法详解
2017/04/19 Python
python简单线程和协程学习心得(分享)
2017/06/14 Python
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
解决c++调用python中文乱码问题
2020/07/29 Python
浅析python连接数据库的重要事项
2021/02/22 Python
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
PHP如何防止SQL注入
2014/05/03 面试题
大学生就业自我推荐信
2014/05/10 职场文书
员工加薪申请报告
2015/05/15 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android
Go语言测试库testify使用学习
2022/07/23 Golang