
最近工作上遇到了使用者可能連續發出請求,造成前端畫面上出現重複資料的問題。問題原因在於,使用者可能在一定時間內,連續觸發了好幾次相同的API請求,導致多個請求已經送出,而出現了重複資料的問題。
問了AI才知道有防抖(Debounce)的前端效能優化技術,跟這個有關的另一個技術用詞是節流(Throttle),但目前只用到防抖。
簡單來講,防抖是在一定時間內,取最後一個請求事件,作為執行的內容。
可以自行實作該邏輯,但已經有人家造好的輪子何不拿來用?lodash函式庫有提供debounce函數,直接使用即可!
const fetchData = _.debounce([function], [delay time])
fetchData()
參考文章