南昌小程序开发_Vue的click工作防抖和节约处理详

日期:2021-01-06 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

Vue的click事件防抖和节流处理详解     ~   今天小编就为大家分享一篇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事件防抖和节流处理详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。