Vue中click事件防抖和節(jié)流處理的示例分析-創(chuàng)新互聯(lián)

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

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

函數(shù)防抖

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

在vue中對(duì)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ù)事件后，短時(shí)間間隔內(nèi)無(wú)法連續(xù)調(diào)用，只有上一次函數(shù)執(zhí)行后，過(guò)了規(guī)定的時(shí)間間隔，才能進(jìn)行下一次的函數(shù)調(diào)用。

在vue中對(duì)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)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前文章：Vue中click事件防抖和節(jié)流處理的示例分析-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://m.jiaotiyi.com/article/cdecss.html