Vue中如何实现click事件的防抖与节流效果？

本文共计312个文字，预计阅读时间需要2分钟。

javascript函数防抖+定义：多次触发事件后，事件处理函数只执行一次，且是在最后一次操作结束时执行。

在Vue中为click事件添加防抖处理：const on=Vue.prototype.$on;Vue.prototype.$on=function(event, handler) { // 防抖处理逻辑};

函数防抖

定义：多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行。

在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事件防抖和节流处理详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持易盾网络。