vue全局防抖和節流

函數防抖

防抖分為兩種: 

 一種是立即執行：頻繁觸發事件，第一次觸發時執行函數，后面觸發不會執行，停止觸發，間隔一定時間之后再觸發事件，函數才會再次執行

另一種是后執行：頻繁觸發事件，事件只會在觸發事件之后間隔定義的時間，函數才會被執行，而且只會執行最后一次觸發的事件。  

在vue中對click添加防抖處理 ：

// 防抖處理-立即執行
const on = vue.prototype.$on
Vue.prototype.$on = function (event, func) {
 let timer;
 let flag = true;
 let newFunc = func
 if (event == 'click') {
 newFunc = function () {
 if(flag) {
 func.apply(this, arguments)
 flag = false
 }
 clearTimeout(timer)
 timer = setTimeout(function () {
 flag = true
 }, 500)
 }
 }
 on.call(this, event, newFunc)
}



// 防抖處理 -- 最后執行
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)
}

vi設計http://www.maiqicn.com 辦公資源網站大全https://www.wode007.com

函數節流

定義：

事件觸發后，會先執行一次事件函數，執行之后如果在規定時間間隔內再觸發事件，將不出觸發函數，超過規定的事件間隔后會再次觸發一次，如此往復

在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)
}

使用方式：選擇一種，將代碼復制粘貼在main.js即可。