" />

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue中使用防抖與節(jié)流的方法

 更新時間:2022年01月18日 10:42:00   作者:丿小破孩灬  
這篇文章主要為大家介紹了Vue中使用防抖與節(jié)流的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助

何為防抖/節(jié)流

首先先說說何為防抖與節(jié)流

防抖(debounce)

防抖就是一段時間內會多次觸發(fā)相同的事件,而我們的目的卻只是想讓他們在不觸發(fā)的多久以后再執(zhí)行該事件,例如鼠標移動事件(mousemove)、輸入框變更事件(change)等等,這個時候我們就需要一個方法去控制他,一段時間內沒執(zhí)行該事件后,執(zhí)行該事件,即為防抖

節(jié)流(throttle)

節(jié)流就是短時間內會多次觸發(fā)相同的事件,而我們的目的卻只是想讓他們既定時間內只觸發(fā)一次,例如滾輪事件(scroll)、鼠標點擊事件(click)等等,這個時候我們就需要一個方法去控制他,一段時間(0.5S/1S)之內只能觸發(fā)一次事件,即為節(jié)流

防抖(debounce)

// 防抖
export default function debounce(fn, time) {
  time = time || 200
  // 定時器
  let timer = null
  return function(...args) {
    var _this = this
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(function() {
      timer = null
      fn.apply(_this, args)
    }, time)
  }
}

節(jié)流(throttle)

// 節(jié)流
export default function throttle(fn, time) {
  let timer = null
  time = time || 1000
  return function(...args) {
    if (timer) {
      return
    }
    const _this = this
    timer = setTimeout(() => {
      timer = null
    }, time)
    fn.apply(_this, args)
  }
}

頁面使用

直接就用click的點擊速度模擬觸發(fā)事件的頻率了

<el-button @click="clickDebounce">防抖</el-button>
<el-button @click="clickThrottle">節(jié)流</el-button>
//引用定義好的JS方法
import debounce from '@/utils/debounce'
import throttle from '@/utils/throttle'
methods: {
    clickDebounce: debounce((e) => {
      console.log(1)
    }, 1000),
    clickThrottle: throttle((e) => {
      console.log(2)
    }, 1000),
}

使用場景

使用場景根據(jù)業(yè)務需求可以有很多很多 簡單舉兩個例子

防抖(debounce)搜索框自動搜索的時候,可搜索下拉框遠程搜索的時候,用戶在沒輸入完的情況下,防抖可以節(jié)約請求資源。
鼠標移動的時候,鼠標停下來不動再執(zhí)行方法

節(jié)流(throttle)滾動頁面的時候

總結

本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關注腳本之家的更多內容!

相關文章

  • Vue動畫之第三方類庫實現(xiàn)動畫方式

    Vue動畫之第三方類庫實現(xiàn)動畫方式

    這篇文章主要介紹了Vue動畫之第三方類庫實現(xiàn)動畫方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • 詳解Vue適時清理keepalive緩存方案

    詳解Vue適時清理keepalive緩存方案

    說到Vue緩存,我們肯定首先選擇官方提供的緩存方案keep-alive,本文主要介紹了詳解Vue適時清理keepalive緩存方案,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2022-07-07
  • 淺談Vue static 靜態(tài)資源路徑 和 style問題

    淺談Vue static 靜態(tài)資源路徑 和 style問題

    這篇文章主要介紹了淺談Vue static 靜態(tài)資源路徑 和 style問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue地址欄直接輸入路由無效問題的解決

    vue地址欄直接輸入路由無效問題的解決

    這篇文章主要介紹了vue地址欄直接輸入路由無效問題的解決,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11
  • vue地區(qū)選擇組件教程詳解

    vue地區(qū)選擇組件教程詳解

    這篇文章主要介紹了vue地區(qū)選擇組件主要用于全國地區(qū)數(shù)據(jù)的操作,包括省,市,區(qū)三級聯(lián)動,地區(qū)數(shù)據(jù)的添加和刪除,本文重點給大家介紹vue地區(qū)選擇組件教程詳解,需要的朋友參考下吧
    2018-05-05
  • Vue封裝實現(xiàn)可配置的搜索列表組件

    Vue封裝實現(xiàn)可配置的搜索列表組件

    在Vue.js開發(fā)中,經常會遇到需要展示搜索和列表的需求,為了提高代碼復用性和開發(fā)效率,我們可以封裝一個可配置的搜索列表組件,下面我們就來講講如何實現(xiàn)這樣一個組件吧
    2023-08-08
  • 基于element-UI input等組件寬度修改方式

    基于element-UI input等組件寬度修改方式

    這篇文章主要介紹了基于element-UI input等組件寬度修改方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-03-03
  • 分離vue文件中css、js代碼的簡單技巧

    分離vue文件中css、js代碼的簡單技巧

    這篇文章主要給大家介紹了關于分離vue文件中css、js代碼的簡單技巧,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2022-03-03
  • vue管理系統(tǒng)項目中的一些核心技能匯總

    vue管理系統(tǒng)項目中的一些核心技能匯總

    Vue是當今增長最快的前端框架,Vue 平易近人、用途廣泛且性能卓越,它的語法非常直觀,并且具有友好的學習曲線,是開發(fā)人員最想學習的頂級前端庫之一,下面這篇文章主要給大家介紹了關于vue管理系統(tǒng)項目中的一些核心技能,需要的朋友可以參考下
    2022-05-05
  • 詳解vue3中渲染函數(shù)的非兼容變更

    詳解vue3中渲染函數(shù)的非兼容變更

    這篇文章主要介紹了詳解vue3中渲染函數(shù)的非兼容變更,幫助大家更好的理解和學習使用vue框架,感興趣的朋友可以了解下
    2021-03-03

最新評論