Vue中使用节流Lodash throttle
Vue 节流 使用 lodash
2023-09-11 14:15:30 时间
在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自定义组件(通过Vue.use()来使用)即install的使用
- vue - Vue介绍
- Vue - 指令式按钮节流(Button)
- 一文带你理解vue创建一个后台管理系统流程(Vue+Element)
- Vue2.0 搭建Vue脚手架(vue-cli)
- 关于Vue中main.js,App.vue,index.html之间关系进行总结
- VUE input focus事件阻止冒泡 阻止父元素事件触发
- 你知道多少vue指令
- Vue 防抖节流 详细介绍(面试常客、去繁从简、性能优化)
- 【Vue】vue基础语法——computed计算、watch监听、class和style,最后回顾JavaScript里面的常用方法(vue学习day03)
- vue 首次install build 失败
- vue学习笔记五:Jquery VS Vue之事件监听明细对照
- vue学习笔记三:Jquery VS Vue之差异比较概览
- Vue富文本编辑器的使用vue-quill-deitor
- Vue常用项目优化策略
- Vue 安装“npm install -g @vue/cli”发生npm WARN deprecated request@2.88.2: request has been deprecated,的错误解决方法
- 在本机搭建vue-cli3项目
- vue-resource基本使用方法
- Vue-cli 4在vue.config.js中配置别名
- vue前台 (三)优化三级分类请求次数(发送ajax次数)
- 前端技术:vue(Vue项目中-axios设置默认请求地址和请求头)
- Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用
- Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理
- Django+Vue项目学习第二篇:vue项目创建
- Vue学习第27天——路由vue-router的详解及案例练习
- Vue学习第20天——Vue中常用的ajax请求库(axios与vue-rouserce)
- vue.js 与iview官网
- 用Vue实现一个登陆界面
- vue 遍历两个数组 拼接字符串
- vue treeselect 禁止选择某些节点