基于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 相关文章推荐
IE php关于强制下载文件的代码
Aug 23 Javascript
JavaScript实现简单的数字倒计时
May 15 Javascript
轻松理解Javascript变量的相关问题
Jan 20 Javascript
js中document.write和document.writeln的区别
Mar 11 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
echarts多条折线图动态分层的实现方法
May 24 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
layui前端时间戳转化实例
Nov 15 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 Javascript
微信小程序实现打卡签到页面
Sep 21 Javascript
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
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
php adodb连接mssql解决乱码问题
2009/06/12 PHP
php数据库配置文件一般做法分享
2012/07/07 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
简单实现jQuery弹幕效果
2017/05/06 jQuery
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
vue引用外部JS的两种种方法
2020/01/28 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
python正则表达式修复网站文章字体不统一的解决方法
2013/02/21 Python
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
python进程管理工具supervisor使用实例
2014/09/17 Python
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
Django框架视图函数设计示例
2019/07/29 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
美国著名手表网站:Timepiece
2017/11/15 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
应用心理学个人的求职信
2013/12/08 职场文书
教师自荐信
2013/12/10 职场文书
大学军训感言
2014/01/10 职场文书
骨干教师培训感言
2014/01/16 职场文书
电脑售后服务承诺书
2014/03/27 职场文书
个人担保书范文
2014/05/20 职场文书
2015年精神文明建设工作总结
2015/04/21 职场文书
2015年学校总务处工作总结
2015/05/19 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL