js防抖與節流
阿新 • • 發佈：2020-11-13
防抖
多次頻繁觸發，當一段時間內不在觸發，才會執行一催（適用場景：如實時搜尋，滾動載入）
原理：每次觸發，將函式放入定時器中待執行。間隔時間不足再次呼叫時，清除計時器，重新把函式放入定時器。直到間隔時間內無觸發，執行定時器內的函式。demo如下：
function debounce(fn, interval) { var timer; var gapTime = interval || 300;//間隔時間，如果interval不傳，則預設300ms return function () { clearTimeout(timer); timer= setTimeout(function () { fn.call(this); }, gapTime); }; }
window.addEventListener('scroll', debounce(fn, 1000)); //繫結滾動事件function throttle(func, delay) { var prev = Date.now();return function() { var context = this; var args = arguments; var now = Date.now(); if (now - prev >= delay) { func.apply(context, args); prev = Date.now(); } } }
window.addEventListener('scroll', throttle(fn, 1000));