目錄

• 何為防抖/節流
• 防抖(debounce)
• 節流(throttle)
• 頁面使用
• 使用場景
• 總結

何為防抖/QCMelrBsYW節流

首先先說說何為防抖與節流

防抖(debounce)

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

節流(throttle)

節流就是短時間內會多次觸發相同的事件,而我們的目的卻只是想讓他們既定時間內只觸發一次,例如滾輪事件(scroll)、滑鼠點選事件(click)等等,一段時間(0.5S/1S)之內只能觸發一次事件,即為節流

防抖(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)
  }
}

節流(throttle)

// 節流
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的點選速度模擬觸發事件的頻率了

<el-button @click="clickDebounce">防抖&lt;/el-button>
<el-button @click="clickThrottle">節流</el-button>

//引用定義好www.cppcns.com的方法
import debounce from '@/utils/debounce'
import throttle from '@/utils/throttle'
methods: {
    clickDebounce: debounce((e) => {
      console.log(1)
    },1000),clickThrottle: throttle((e) => {
      console.log(2)
    },}

使用場景

使用場景根據業務需求可以有很多很多 簡單舉兩個例子

防抖(debounce)搜尋框自動搜尋的時候,可搜尋下QCMelrBsYW拉框遠端搜尋的時候，使用者在沒輸入完的情況下，防抖可以節約請求資源。
滑鼠移動的時候,滑鼠停下來不動再執行方法

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

總結

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!