Vue的click事件防抖和节流处理详解
人称~ 人气:1函数防抖
定义:多次触发事件后,事件处理函数只执行一次,并且是在触发操作结束时执行。
在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事件防抖和节流处理详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
加载全部内容