在前端開發(fā)中會遇到一些頻繁的事件觸發(fā)，例如input，keyup，keydown，scroll，resize，mousemove等，這非常影響性能，所以我們需要控制它們觸發(fā)的頻率，方法就是防抖與節(jié)流。
- 防抖
防抖的原理就是：要等你觸發(fā)完事件 n 秒內(nèi)不再觸發(fā)事件，我才執(zhí)行。function debounce(func, wait) { var timeout; return function () { var context = this; var args = arguments; clearTimeout(timeout) timeout = setTimeout(function () { func.apply(context, args) }, wait); } } - 節(jié)流
節(jié)流的原理很簡單：如果你持續(xù)觸發(fā)事件，每隔一段時間，只執(zhí)行一次事件。
有兩種主流的實現(xiàn)方式，一種是使用時間戳，一種是設(shè)置定時器。- 定時器實現(xiàn)
特點：會在 n 秒后第一次執(zhí)行，事件停止觸發(fā)后依然會再執(zhí)行一次事件
function throttle(func, wait) { var timeout; return function () { var context = this; var args = arguments; if (!timeout) { timeout = setTimeout(function () { func.apply(context, args) timeout = null; }, wait) } } }- 時間戳實現(xiàn)
特點：第一次事件會立刻執(zhí)行，停止觸發(fā)后沒有辦法再執(zhí)行事件
function throttle(func, wait) { var previous = 0; return function () { var now = Date.now(); var context = this; var args = arguments; if (now - previous > wait) { func.apply(context, args); previous = now; } } } - 定時器實現(xiàn)
- 參考
JavaScript專題之跟著underscore學(xué)節(jié)流
JavaScript專題之跟著underscore學(xué)防抖
