例如,一个按钮的点击事件
<div>
<button @click="handleBtn">点我吧</button>
</div>
methods:{
handleBtn(){
console.log('连环点击发现在xxx秒之内只执行一次')
}
}
在main.js中
const on = Vue.prototype.$on
Vue.prototype.$on = function (event, func) {
let timer
let flag = true
let newFunc = func
if (event === 'click' || event === 'keyup') {
newFunc = function () {
if (flag) {
func.apply(this, arguments)
flag = false
}
clearTimeout(timer)
timer = setTimeout(function () {
flag = true
}, 2000)
}
}
on.call(this, event, newFunc)
}
在实际开发中很实用,比如连续点击某个项目的登录按钮,没有注册防抖会导致登录事件执行很多次…
个人而言,局部防抖比较麻烦,如果想知道局部防抖的方法,可以查看文章https://blog.csdn.net/weixin_61529967/article/details/126150927?spm=1001.2014.3001.5501