基于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 相关文章推荐
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
Sep 27 Javascript
jquery常用技巧及常用方法列表集合
Apr 06 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
Feb 27 Javascript
jQuery中has()方法用法实例
Jan 06 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
让div运动起来 js实现缓动效果
Jul 06 Javascript
深入理解Vue.js源码之事件机制
Sep 27 Javascript
js正则相关知识点专题
May 10 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 Javascript
解决layui laydate 时间控件一闪而过的问题
Sep 28 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 include和require的区别深入解析
2013/06/17 PHP
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
Stop SQL Server
2007/06/21 Javascript
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
javascript parseInt 函数分析(转)
2009/03/21 Javascript
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
jQuery图片预加载 等比缩放实现代码
2011/10/04 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
Javascript算符的优先级介绍
2013/03/20 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
网页中的图片查看器viewjs使用方法
2017/07/11 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
Vue中图片Src使用变量的方法
2019/10/30 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
python实现给字典添加条目的方法
2014/09/25 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
Python数据库小程序源代码
2019/09/15 Python
Python爬虫教程知识点总结
2020/10/19 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
俄罗斯购买内衣网站:Trusiki
2020/08/22 全球购物
师德师风演讲稿
2014/05/05 职场文书
社会学专业求职信
2014/07/17 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书
民事纠纷协议书
2016/03/23 职场文书
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js
提高系统的吞吐量解决数据库重复写入问题
2022/04/23 MySQL