家乡的夜景,小小的月牙儿挂在湛蓝湛蓝的天空上,把淡淡的光洒在军舰上,军舰就像披上了一件银白色的棉袄,海面上波光粼粼,海浪轻轻地拍打着礁石,像一位母亲在抚摸着孩子的小脚丫。
函数防抖
定义:多次触发事件后,事件处理函数只执行一次,并且是在触发操作结束时执行。
在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事件防抖和节流处理详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。