js節流和防抖
阿新 • • 發佈:2020-07-30
js節流和防抖的應用非常普遍,通常我們在完成功能程式碼進行效能優化的時候是最經常考慮到的點。
1、防抖
概念:在第一次觸發時間的時候,不是立即執行函式,而是等待一段時間後(這個時間自己規定)後才去執行。如果在這個時間之內沒有再次觸發,那麼就執行函式。如果在等待這段時間內又觸發了這個函式,那麼等待時間重新開始。
效果:如果在短時間內大量觸發同一事件,只會執行一次函式。
function debounce(fn, delay){ let timer = null; return function(){ if(timer){ clearTimeout(timer) timer= setTimeout(fn, delay) }else{ timer = setTimeout(fn, delay) } } }
2、節流
如上述防抖概念,如果一直在重複觸發這個函式,同時又希望只是在一段時間內失效,過了這段時間再次執行,這個概念就是節流
效果:如果在短時間內大量觸發同一事件,那麼在函式執行一次後,該函式在指定時間內不再執行,直到過了這段時間才重新生效
function throttle(fn, delay){ let valid = true return function(){ if(!valid){ return false } valid = false setTimeout(()=>{ fn() valid = true }, delay) } }