用 js 写一个防抖案例

下面是一个简单的防抖案例，基于 JavaScript 实现：

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

// 例子
function handleInput() {
  console.log('Handling input...');
}

const input = document.querySelector('input');
input.addEventListener('input', debounce(handleInput, 1000));

这个防抖函数接受两个参数：一个是要执行的函数，另一个是等待的时间长度（以毫秒为单位）。当调用该函数时，它会返回一个新的函数，这个新函数会在指定的时间内等待，直到没有新的调用，然后再执行原函数。在上面的例子中，我们把 `handleInput` 函数和事件监听器一起传递给 `debounce` 函数，这样 `handleInput` 函数就会被防抖处理。这个例子中，输入框的 `input` 事件在等待 1 秒后才会调用 `handleInput` 函数，确保了用户输入时不会频繁地调用函数。