一. 防抖和節流的作用:
防止高頻的事件觸發造成不必要的計算消耗, 比如, 典型的應用場景:
二. 防抖的優缺點:
建立timer, 當新的觸發出現時, 銷毀老的timer.
效能消耗稍大於節流(不過, 這點效能差別算不了什麼).
如果連續的呼叫間隔一直小於delay, 會造成長時間不觸發.
三. 節流的優缺點:
通過時間差來判斷要不要放棄當次觸發,
不需要建立和銷毀timer.
但是因為根據前一次的時間差來判斷放棄, 可能會扔掉最後一次.
如果最後一次包含重要的狀態切換, 則可能丟失.
四. 防抖+節流的公升級版
在防抖的基礎上增加乙個值, 用於記住上次的觸發時間,
採用上次觸發時間到當前時間的差, 用於計算真實的delay大小.
當delay小到等於0的時候, cleartimeout就沒有機會清掉前一次觸發了.
五. **實現和測驗:
function debounce(cb, delay) , delay);
}}function throttle(cb, delay)
}}function debounce_throttle(cb, delay) , math.max(0, delay - (date.now() - lasttick))); // delay減去已消耗時間
}}function a(a) ] a.proc, this:$, args:$`);
}}let aa = new a(123);
let bb = new a(456);
let cc = new a(789);
let db = debounce(aa.proc.bind(aa), 1000);
let tt = throttle(bb.proc.bind(bb), 1000);
let dt = debounce_throttle(cc.proc.bind(cc), 1000);
let starttick = date.now();
let trigger = setinterval(()=>] interval call`);
db(1,2,3);
tt(4,5,6);
dt(7,8,9);
if (date.now() - starttick > 4000) clearinterval(trigger);
}, 200);
> node .\test.js
[1616485874.114] interval call
[1616485874.121] a.proc, this:456, args:[4,5,6]
[1616485874.315] interval call
[1616485874.516] interval call
[1616485874.716] interval call
[1616485874.914] a.proc, this:789, args:[7,8,9]
[1616485874.917] interval call
[1616485875.117] interval call
[1616485875.317] interval call
[1616485875.318] a.proc, this:456, args:[4,5,6]
[1616485875.518] interval call
[1616485875.717] interval call
[1616485875.914] a.proc, this:789, args:[7,8,9]
[1616485875.919] interval call
[1616485876.118] interval call
[1616485876.319] interval call
[1616485876.319] a.proc, this:456, args:[4,5,6]
[1616485876.519] interval call
[1616485876.72] interval call
[1616485876.914] a.proc, this:789, args:[7,8,9]
[1616485876.92] interval call
[1616485877.121] interval call
[1616485877.32] interval call
[1616485877.321] a.proc, this:456, args:[4,5,6]
[1616485877.521] interval call
[1616485877.722] interval call
[1616485877.915] a.proc, this:789, args:[7,8,9]
[1616485877.923] interval call
[1616485878.915] a.proc, this:789, args:[7,8,9]
[1616485878.937] a.proc, this:123, args:[1,2,3]
>
節流前期正常觸發, 遺落了最後一次觸發.
只有第三個版本, 即能均勻觸發, 又不丟失最後一次觸發.
防抖和節流的實現
常見的滾動監聽事件，每次滾動都會觸發，如此太過浪費效能，要如何優化呢？思路 在第一次觸發事件的時候，不是立即執行函式，而是給出乙個delay時間值，例如200ms 效果 短時間內大量出發同一事件最終只會執行一次 實現 利用settimeout來實現計時器的功能 防抖 const debounce f...
js的防抖和節流
防抖和節流嚴格算起來應該屬於效能優化的知識，但實際上遇到的頻率相當高，處理不當或者放任不管就容易引起瀏覽器卡死。所以還是很有必要早點掌握的。節流概念 throttle 按照設定的時間固定執行一次函式，比如200ms一次。注意 固定就是你在mousemove過程中，執行這個節流函式，它一定是200ms...
防抖和節流的實現
當頁面發生滾動的時1s後執行函式 var timer null window.addeventlistener scroll function 1000 把函式抽出來 var timeout null function debounce 1000 window.addeventlistener sc...