基于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 相关文章推荐
javascript 点击整页变灰的效果(可做退出效果)。
Jan 09 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 Javascript
JavaScript闭包详解
Feb 02 Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
js实现不提示直接关闭网页窗口
Mar 30 Javascript
基于vue组件实现猜数字游戏
May 28 Javascript
extract-text-webpack-plugin用法详解
Feb 14 Javascript
详解ES6 中的Object.assign()的用法实例代码
Jan 11 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
动易数据转成dedecms的php程序
2007/04/07 PHP
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
php适配器模式介绍
2012/08/14 PHP
PHP页面实现定时跳转的方法
2014/10/31 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
Python生成器(Generator)详解
2015/04/13 Python
简单介绍使用Python解析并修改XML文档的方法
2015/10/15 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
Python发展史及网络爬虫
2019/06/19 Python
Python3 Tkinkter + SQLite实现登录和注册界面
2019/11/19 Python
Python 如何调试程序崩溃错误
2020/08/03 Python
Python使用xpath实现图片爬取
2020/09/16 Python
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
建筑工程专业毕业生自荐信
2013/10/19 职场文书
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
大学生学习自我评价
2014/01/13 职场文书
《商鞅南门立木》教学反思
2014/02/16 职场文书
民生工作实施方案
2014/05/31 职场文书
企业承诺书格式范文
2015/04/28 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书
民事纠纷协议书
2016/03/23 职场文书
python 字典和列表嵌套用法详解
2021/06/29 Python
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL
MySQL派生表联表查询实战过程
2022/03/20 MySQL
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS