js 防抖函数接口做防抖

在JavaScript中，防抖（Debounce）是一种优化技术，主要用于减少频繁事件触发带来的性能消耗，比如滚动事件、输入框搜索建议等。防抖函数通常接受两个参数：一个回调函数（event handler），以及一个延迟时间（debounce delay）。

防抖函数的工作原理是这样的：当连续触发某个事件时，它并不会立即执行回调，而是设置一个定时器，在这个指定的时间间隔内如果该事件继续被触发，计时器会被重置；如果在这段时间结束后事件不再触发，那么就会执行一次回调。这样可以保证回调只被执行一次，即使是在短时间内多次触发。

下面是一个简单的防抖函数接口实现：

function debounce(func, delay) {
  let timeoutId;

  return function() {
    const context = this;
    const args = arguments;
    
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}

你可以像这样使用它：

const throttledFunction = debounce(functionToRun, 300); // 设置300毫秒的延迟

window.addEventListener('scroll', throttledFunction);