js防抖和节流代码示例

防抖和节流都是为了解决高频率触发某个事件而导致性能问题的问题，但它们的实现方式不同。

防抖：在一个事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。

代码示例：

function debounce(fn, delay) {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(context, args);
    }, delay);
  }
}

调用方式：

function handleResize() {
  console.log('窗口大小改变了');
}

window.addEventListener('resize', debounce(handleResize, 1000));

节流：在一定时间内只执行一次回调函数，即使在这段时间内触发了多次。

代码示例：

function throttle(fn, delay) {
  let timer = null;
  let lastTime = 0;
  return function() {
    const context = this;
    const args = arguments;
    const now = Date.now();
    if (now - lastTime > delay) {
      fn.apply(context, args);
      lastTime = now;
    }
  }
}

调用方式：

function handleScroll() {
  console.log('滚动了');
}

window.addEventListener('scroll', throttle(handleScroll, 1000));