小編給大家分享一下Vue中click事件防抖和節(jié)流處理的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)于2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都網(wǎng)站建設(shè)、成都網(wǎng)站制作網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元沽源做網(wǎng)站,已為上家服務(wù),為沽源各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792

函數(shù)防抖

定義：多次觸發(fā)事件后，事件處理函數(shù)只執(zhí)行一次，并且是在觸發(fā)操作結(jié)束時執(zhí)行。

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

函數(shù)節(jié)流

定義：觸發(fā)函數(shù)事件后，短時間間隔內(nèi)無法連續(xù)調(diào)用，只有上一次函數(shù)執(zhí)行后，過了規(guī)定的時間間隔，才能進行下一次的函數(shù)調(diào)用。

在vue中對click添加節(jié)流處理

const on = Vue.prototype.$on
 
// 節(jié)流
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事件防抖和節(jié)流處理的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁名稱：Vue中click事件防抖和節(jié)流處理的示例分析-創(chuàng)新互聯(lián)
URL標題：http://weahome.cn/article/cdecss.html