JavaScript防抖与节流的实现与注意事项

在前端开发中，我们经常会碰到需要对用户输入或页面滚动等事件进行优化的情况，这时就需要考虑使用防抖与节流的技术来控制这些事件的触发频率，以避免性能浪费和出错。

防抖

防抖是指在一定时间后执行函数，如果在这段时间内再次触发函数，那么就重新计时，在下一个一定时间后执行函数。可以理解为对于多次连续事件只执行一次操作。

实现

以下是一个简单的防抖实现：

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

function handleInput() {
  console.log('input changed');
}

document.querySelector('#input').addEventListener('input', debounce(handleInput, 500));

这个实例中，当用户在输入框中输入时，handleInput 函数不会在每次输入时都执行，而是在用户停止输入后的 500ms 执行一次。

注意事项

在使用防抖技术时需要注意以下几点：

防抖设置的时间间隔需要根据实际情况来调整，过长会导致用户体验不佳，过短则会频繁触发事件，性能开销大。
防抖函数需要返回一个函数，该函数负责清除定时器和执行传入的函数。

节流

节流是指在一定时间内只执行一次函数，可以理解为对于多次连续事件间隔性地执行操作。

实现

以下是一个简单的节流实现：

function throttle(fn, delay) {
  let timer = null;
  let lastTime = null;
  return function() {
    const now = +new Date();
    if (lastTime && now - lastTime < delay) {
      clearTimeout(timer);
      timer = setTimeout(() => {
        lastTime = now;
        fn.apply(this, arguments);
      }, delay);
    } else {
      lastTime = now;
      fn.apply(this, arguments);
    }
  }
}

function handleScroll() {
  console.log('scroll');
}

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

这个实例中，当用户滚动页面时，handleScroll 函数不会在每次滚动时都执行，而是在每 500ms 执行一次。