防抖 與 節流 目的都是避免一定時間內,大量重複的操作造成的效能損耗。因此原理也類似,都是阻止過多的事件執行,只保留一部分來執行。適用場景略有不同,也有交叉,動手練習一遍就懂了。
區別 | 防抖(Debounce) | 節流(throttle) |
---|---|---|
描述 | 一定延遲時間內,連續事件只執行最後一次 | 一段固定時間內只執行一次 |
原理 | 只保留一個延時setTimeout() 的執行器,後續新的替代舊的 |
判斷時間間隔,在固定間隔時間內,只執行一次。 |
執行次數 | 只執行最後一次 | 執行首次、最後一次,或首次+最後一次 |
合適場景 | 連續操作只需要一次的,如變更內容提交到後端 | 連續操作定期執行的場景:連續的UI互動,如拖拽、捲動 |
按字面意思理解就是 防止抖動(Debounce /di'bauns/ 防抖動),本來只需要點選一次,結果手抖操作了很多次,重複執行就造成了額外的浪費。