js 点击按钮的防抖

防抖 (debouncing) 是一种技术，旨在减少函数在短时间内被频繁调用的情况。

在 JavaScript 中，可以通过使用 setTimeout 函数来实现防抖。

例如，假设你有一个在点击按钮时调用的函数：

function handleClick() {
  console.log('Button clicked');
}

document.querySelector('button').addEventListener('click', handleClick);

要在点击按钮时实现防抖，可以这样改写代码：

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

function handleClick() {
  console.log('Button clicked');
}

document
  .querySelector('button')
  .addEventListener('click', debounce(handleClick, 1000));

在上面的代码中，我们使用了 debounce 函数来包装 handleClick 函数，并将 debounce 函数作为事件监听器的回调函数。这样，每当点击按钮时，都会清除 timer 并重新设置它，以延迟调用 handleClick 函数。如果在延迟期间再次点击按钮，则会再次清除 timer 并重新设置它，从而再次延迟调用 handleClick 函数。这样，就可以在点击按钮时实现防抖了。