基于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 相关文章推荐
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
Apr 24 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
Aug 07 Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 Javascript
js判断浏览器类型为ie6时不执行
Jun 15 Javascript
js怎么覆盖原有方法实现重写
Sep 04 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
vue.js学习之递归组件
Dec 13 Javascript
javascript数据类型详解
Feb 07 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
vuejs如何配置less
Apr 25 Javascript
javascript中的replace函数(带注释demo)
Jan 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
解决中英文字符串长度问题函数
2007/01/16 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
PHP对象相关知识总结
2017/04/09 PHP
PHP7新功能总结
2019/04/14 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
three.js实现3D视野缩放效果
2017/11/16 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
2018/10/16 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
2019/10/24 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
Python  连接字符串(join %)
2008/09/06 Python
python绘制立方体的方法
2018/07/02 Python
python实现推箱子游戏
2020/03/25 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
雷蛇美国官网:Razer
2020/04/03 全球购物
英语专业毕业生自荐信
2013/10/28 职场文书
运动会方阵解说词
2014/02/12 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
病危通知单
2015/04/17 职场文书
护理培训心得体会
2016/01/22 职场文书
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技
Java Spring读取和存储详细操作
2022/08/05 Java/Android