基于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 相关文章推荐
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
Angular实现的简单查询天气预报功能示例
Dec 27 Javascript
Angular Renderer (渲染器)的具体使用
May 03 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 Javascript
JavaScript实现模态对话框实例
Jan 13 Javascript
解析原生JS getComputedStyle
May 25 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 Ctemplate引擎开发相关内容
2012/03/03 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
jQuery控制TR显示隐藏的三种常用方法
2014/08/21 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
详解iframe与frame的区别
2016/01/13 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
Vue2.0权限树组件实现代码
2017/08/29 Javascript
详解React服务端渲染从入门到精通
2019/03/28 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
2019/11/14 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
python根据文件大小打log日志
2014/10/09 Python
解密Python中的描述符(descriptor)
2015/06/03 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
介绍一下UNIX启动过程
2013/11/14 面试题
工程造价专业大专生求职信
2013/10/06 职场文书
办公室保洁员岗位职责
2013/12/02 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
创先争优个人承诺书
2014/08/30 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
小学教师个人总结
2015/02/05 职场文书
springboot实现string转json json里面带数组
2022/06/16 Java/Android