防抖与节流

防抖与节流是一套成熟的高频触发事件的优化方式

防抖

将一定时间间隔内触发的同一个事件合并为一次触发

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// window.addEventListener('scroll', debounce(lazy, 1000))
window.onscroll = debounce(thing, 1000)

function thing() {
console.log(document.documentElement.scrollTop)
}

function debounce(fn, wait) {
var timeout = null;
return function () {
if (timeout !== null) clearTimeout(timeout);
timeout = setTimeout(fn, wait);
}
}

节流

奖高频操作按照一定的时间间隔踩点执行

1
2
3
4
5
6
7
8
9
10
11
12
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();
}
}
}

优劣

  • 防抖可捕捉最后一次触发但有可能合并所有触发,无法体现过程
  • 节流过程粒度均匀但永远无法捕捉最后一次触发

可视化差异