Vue的click事件防抖和节流处理详解
更新时间：2019年11月13日 09:25:14 作者：人称～
今天小编就为大家分享一篇Vue的click事件防抖和节流处理详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
函数防抖
定义：多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行。
在vue中对click添加防抖处理
const on = Vue.prototype.$on
// 防抖处理
Vue.prototype.$on = function (event, func) {
let timer
let newFunc = func
if (event === 'click') {
newFunc = function () {
clearTimeout(timer)
timer = setTimeout(function () {
func.apply(this, arguments)
}, 500)
}
}
on.call(this, event, newFunc)
}
函数节流
定义：触发函数事件后，短时间间隔内无法连续调用，只有上一次函数执行后，过了规定的时间间隔，才能进行下一次的函数调用。
在vue中对click添加节流处理
const on = Vue.prototype.$on
// 节流
Vue.prototype.$on = function (event, func) {
let previous = 0
let newFunc = func
if (event === 'click') {
newFunc = function () {
const now = new Date().getTime()
if (previous + 1000 <= now) {
func.apply(this, arguments)
previous = now
}
}
}
on.call(this, event, newFunc)
}
以上这篇Vue的click事件防抖和节流处理详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue3使用echart的两种引入方式以及注意事项说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
Vue+ElementUI前端添加展开收起搜索框按钮完整示例
最近一直在用element ui做后台项目,下面这篇文章主要给大家介绍了关于Vue+ElementUI前端添加展开收起搜索框按钮的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了vue项目中做编辑功能传递数据时遇到问题的解决方法，vue父组件向子组件传递数据的问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
这篇文章主要介绍了vue使用vue-router beforEach实现判断用户登录跳转路由筛选,本篇文章默认您已经会使用 webpack 或者 vue-cli 来进行环境的搭建，并且具有一定的vue基础。需要的朋友可以参考下2018-06-06
本篇文章主要介绍了详解vue+css3做交互特效的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章介绍了在 Web 应用中处理大量数据展示的两种滚动加载更多方案,滚动加载更多通过分页工作,优点是实现简单、用户体验流畅,缺点是内存占用可能过高,虚拟列表只渲染视口内容,性能好但实现复杂,本文介绍了Vue实现滚动加载更多效果,需要的朋友可以参考下2024-12-12
这篇文章主要为大家详细介绍了如何利用Vue实现文件批量打包压缩下载功能，文中的实现步骤讲解详细，感兴趣的小伙伴可以跟随小编一起了解一下2022-07-07
这篇文章主要介绍了Vue使用鼠标在Canvas上绘制矩形，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要介绍了vue路由切换时取消之前的所有请求操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
本篇文章主要介绍了浅谈vuepress 踩坑记，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
最新评论