[前端] 防抖(Debounce)避免用戶頻繁發出重複請求

pexels-photo-574071-574071.jpg

最近工作上遇到了使用者可能連續發出請求,造成前端畫面上出現重複資料的問題。問題原因在於,使用者可能在一定時間內,連續觸發了好幾次相同的API請求,導致多個請求已經送出,而出現了重複資料的問題。

問了AI才知道有防抖(Debounce)的前端效能優化技術,跟這個有關的另一個技術用詞是節流(Throttle),但目前只用到防抖。

簡單來講,防抖是在一定時間內,取最後一個請求事件,作為執行的內容。

可以自行實作該邏輯,但已經有人家造好的輪子何不拿來用?lodash函式庫有提供debounce函數,直接使用即可!

const fetchData = _.debounce([function], [delay time])
fetchData()

參考文章

  1. 什麼是防抖 (debounce)?如何實踐防抖 (debounce) 函式?|ExplainThis
  2. Lodash Documentation
  3. 一次搞懂前端開發者不可不知的Debounce與Throttle (手把手教學) – Shubo 的程式開發筆記
  4. javascript – 在 Vue 中使用lodash对事件进行防抖和节流 – 终身学习者 – SegmentFault 思否

發佈留言