防抖与节流 - 掘金

防抖debounce与节流throttle都是控制事件处理函数执行频率的方法, 当函数会进行DOM操作或者具有请求服务器等行为并且作为高频事件例如onscroll触发的事件处理函数时, 就需要进行事件处理函数执行频率的控制, 否则会造成大量的资源浪费致使性能下降, 当然无论是防抖还是节流实质上并没有减少事件触发次数, 而是通过减少事件处理函数的执行次数从而提高性能

防抖

非立即防抖

当持续触发事件的时候, 事件处理函数上完全不执行的, 等最后一次触发结束的一段时间之后再去执行. 最常见的例子就是搜索建议功能, 当用户进行持续输入时, 并不会请求服务器进行搜索建议的计算, 直至用户输入完成后的N毫秒才会将数据传输至后端并返回搜索建议实现思路: 每次触发事件时都取消之前的延时调用方法并重设定时器

function debounce(wait, funct, ...args) {
  let timer = null;
  return () => {
    clearTimeout(timer);
    timer = setTimeout(() => funct(...args), wait);
  }
}
window.onscroll = debounce(300, (a) => console.log(a), 1);

立即防抖

当持续触发事件的时候, 事件处理函数会立即执行, 然后不再执行事件处理函数, 直至最后一次事件触发之后的一段时间后才允许再次执行事件处理函数实现思路: 判断是否存在定时器, 没有则执行事件处理函数, 然后无论是否已经存在定时器都需要重设定时器

function debounce(wait, funct, ...args) {
  let timer = null;
  return () => {
    if (!timer) funct(...args);
    clearTimerout(timer);
    timer = setTimeout(() => timer = null, wait);
  }
}
window.onscroll = debounce(300, (a) => console.log(a), 1);

节流

当事件持续触发时, 节流操作可以稀释事件处理函数执行频率, 假设在1s内onmousemove事件触发了100次, 通过节流就可以使得onmousemove事件的事件处理函数每100ms触发一次, 也就是在1s内onmousemove事件的事件处理函数只执行了10次

时间戳实现

实现思路: 通过时间戳记录上次事件处理函数执行时间, 事件触发时若时间差大于执行周期则执行事件处理函数并赋值执行时间为当前时间戳

function throttle(wait, funct, ...args) {
  let previous = 0;
  return () => {
    let now = +new Date();
    if (now - previous > wait) {
      funct(...args);
      previous = now;
    }
  }
}
window.onscroll = throttle(1000, (a) => console.log(a), 1);

定时器实现

实现思路: 判断是否存在定时器, 没有则执行事件处理函数并重设定时器

function throttle(wait, funct, ...args) {
  let timer = null;
  return () => {
    if (!timer) {
      funct(...args);
      timer = setTimeout(() => timer = null, wait);
    }
  }
}
window.onscroll = throttle(1000, (a) => console.log(a), 1);