JavaScript中的防抖與節流-圖文版

2022-12-18 12:00:46

01、防抖還是節流

防抖節流 目的都是避免一定時間內,大量重複的操作造成的效能損耗。因此原理也類似,都是阻止過多的事件執行,只保留一部分來執行。適用場景略有不同,也有交叉,動手練習一遍就懂了。

區別 防抖(Debounce) 節流(throttle)
描述 一定延遲時間內,連續事件只執行最後一次 一段固定時間內只執行一次
原理 只保留一個延時setTimeout()的執行器,後續新的替代舊的 判斷時間間隔,在固定間隔時間內,只執行一次。
執行次數 只執行最後一次 執行首次、最後一次,或首次+最後一次
合適場景 連續操作只需要一次的,如變更內容提交到後端 連續操作定期執行的場景:連續的UI互動,如拖拽、捲動

02、什麼是防抖(Debounce)?

按字面意思理解就是 防止抖動(Debounce /di'bauns/ 防抖動),本來只需要點選一次,結果手抖操作了很多次,重複執行就造成了額外的浪費。