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事件防抖和节流处理详解就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。
>函数prototype

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。