如何用JavaScript写一个防抖函数

• 构建JavaScript防抖函数。

防抖函数基础

• 定义：防抖函数通过限制函数在特定时间内只能执行一次，来优化性能和用户体验。
• 应用场景：适用于搜索建议、窗口调整、滚动事件等频繁触发的场景。

实现防抖函数

• 简单防抖函数：

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

• 使用示例：

const handleScroll = () => console.log('Handling scroll event');
const debouncedScroll = debounce(handleScroll, 300);
window.addEventListener('scroll', debouncedScroll);

• 立即执行版本：

function debounceImmediate(func, wait, immediate = true) {
  let timeoutId;
  let called = false;
  return function(...args) {
    if (immediate && !called) {
      func.apply(this, args);
      called = true;
    } else {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => {
        if (!immediate) func.apply(this, args);
        called = false;
      }, wait);
    }
  };
}

性能优化与安全

• 内存泄漏预防：确保在不再需要时移除事件监听器，避免内存泄漏。
• 库支持：可以使用jQuery、Lodash或Underscore等库提供的防抖实现，简化代码。