基于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 相关文章推荐
window.dialogArguments 使用说明
Apr 11 Javascript
JavaScript执行顺序详细介绍
Dec 04 Javascript
jQuery学习总结之jQuery事件
Jun 30 Javascript
jquery获取当前日期的方法
Jan 14 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
javascript实现简单的省市区三级联动
May 14 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 Javascript
在Uni中使用Vue的EventBus总线机制操作
Jul 31 Javascript
vue实现可移动的悬浮按钮
Mar 04 Vue.js
关于Javascript闭包与应用的详解
Apr 22 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
php中防止SQL注入的最佳解决方法
2013/04/25 PHP
php读取txt文件并将数据插入到数据库
2016/02/23 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
js二级地域选择的实现方法
2013/06/17 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
2016/11/21 Javascript
JS中的三个循环小结
2017/06/20 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
JS实现json数组排序操作实例分析
2019/10/28 Javascript
Angular如何由模板生成DOM树的方法
2019/12/23 Javascript
小程序跳转H5页面的方法步骤
2020/03/06 Javascript
JavaScript十大取整方法实例教程
2020/12/03 Javascript
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
python搜索包的路径的实现方法
2019/07/19 Python
Python简易版停车管理系统
2019/08/12 Python
基于python进行抽样分布描述及实践详解
2019/09/02 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
django中media媒体路径设置的步骤
2019/11/15 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
浅谈Django中的QueryDict元素为数组的坑
2020/03/31 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
通信工程专业毕业生推荐信
2013/12/25 职场文书
高中军训第一天感言
2014/03/06 职场文书
说明书格式及范文
2014/05/07 职场文书
情人节活动总结范文
2015/02/05 职场文书
Java数据结构之链表相关知识总结
2021/06/18 Java/Android
Python Matplotlib库实现画局部图
2021/11/17 Python