Vue的click事件防抖和節(jié)流處理詳解

更新時(shí)間：2019年11月13日 09:25:14 作者：人稱～

今天小編就為大家分享一篇Vue的click事件防抖和節(jié)流處理詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

函數(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)無法連續(xù)調(diào)用，只有上一次函數(shù)執(zhí)行后，過了規(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é)流處理詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue3使用echart的兩種引入方式以及注意事項(xiàng)說明
這篇文章主要介紹了vue3使用echart的兩種引入方式以及注意事項(xiàng)說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue+ElementUI前端添加展開收起搜索框按鈕完整示例
最近一直在用element ui做后臺(tái)項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于Vue+ElementUI前端添加展開收起搜索框按鈕的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-05-05
vue項(xiàng)目中做編輯功能傳遞數(shù)據(jù)時(shí)遇到問題的解決方法
這篇文章主要介紹了vue項(xiàng)目中做編輯功能傳遞數(shù)據(jù)時(shí)遇到問題的解決方法，vue父組件向子組件傳遞數(shù)據(jù)的問題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
使用vue-router beforEach實(shí)現(xiàn)判斷用戶登錄跳轉(zhuǎn)路由篩選功能
這篇文章主要介紹了vue使用vue-router beforEach實(shí)現(xiàn)判斷用戶登錄跳轉(zhuǎn)路由篩選,本篇文章默認(rèn)您已經(jīng)會(huì)使用 webpack 或者 vue-cli 來進(jìn)行環(huán)境的搭建，并且具有一定的vue基礎(chǔ)。需要的朋友可以參考下
2018-06-06
詳解vue+css3做交互特效的方法
本篇文章主要介紹了詳解vue+css3做交互特效的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-11-11
Vue實(shí)現(xiàn)滾動(dòng)加載更多效果的示例代碼
這篇文章介紹了在?Web?應(yīng)用中處理大量數(shù)據(jù)展示的兩種滾動(dòng)加載更多方案,滾動(dòng)加載更多通過分頁工作,優(yōu)點(diǎn)是實(shí)現(xiàn)簡(jiǎn)單、用戶體驗(yàn)流暢,缺點(diǎn)是內(nèi)存占用可能過高,虛擬列表只渲染視口內(nèi)容,性能好但實(shí)現(xiàn)復(fù)雜,本文介紹了Vue實(shí)現(xiàn)滾動(dòng)加載更多效果,需要的朋友可以參考下
2024-12-12
Vue實(shí)現(xiàn)文件批量打包壓縮下載
這篇文章主要為大家詳細(xì)介紹了如何利用Vue實(shí)現(xiàn)文件批量打包壓縮下載功能，文中的實(shí)現(xiàn)步驟講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起了解一下
2022-07-07
Vue使用鼠標(biāo)在Canvas上繪制矩形
這篇文章主要介紹了Vue使用鼠標(biāo)在Canvas上繪制矩形，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-12-12
vue路由切換時(shí)取消之前的所有請(qǐng)求操作
這篇文章主要介紹了vue路由切換時(shí)取消之前的所有請(qǐng)求操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
淺談vuepress 踩坑記
本篇文章主要介紹了淺談vuepress 踩坑記，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-04-04