js防抖和节流

防抖和节流都是用来控制函数执行频率的方法。

防抖（debounce）：当事件被触发 n 秒后再执行回调函数，如果在这 n 秒内又触发了事件，则重新计算时间。例如，在输入框中每次输入都会触发 onchange 事件，如果我们希望用户在停止输入 n 秒后再触发回调函数，可以使用防抖来实现。

节流（throttle）：每隔一段时间执行一次回调函数，比如滚动页面时每 200ms 执行一次函数。节流可以让函数在一定程度上平滑执行，减少函数调用的次数，从而提高性能。

下面是防抖和节流的 JavaScript 实现：

防抖：

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

节流：

function throttle(func, delay) {
  let timer = null;
  return function(...args) {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, args);
        timer = null;
      }, delay);
    }
  };
}

使用方法：

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

const debouncedHandleInput = debounce(handleInput, 500);
const throttledHandleInput = throttle(handleInput, 500);

// 防抖
input.addEventListener("input", debouncedHandleInput);

// 节流
window.addEventListener("scroll", throttledHandleInput);