前端优雅实现防抖和节流的几种方法示例

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

// 使用示例
const inputHandler = debounce((event) => {
  console.log('Input value:', event.target.value);
}, 300);

document.getElementById('search').addEventListener('input', inputHandler);

function debounce(func, wait, immediate) {
  let timeout;
  return function(...args) {
    const context = this;
    if (timeout) clearTimeout(timeout);
    if (immediate) {
      // 如果是立即执行，并且没有定时器，则直接调用函数
      const callNow = !timeout;
      timeout = setTimeout(() => timeout = null, wait);
      if (callNow) func.apply(context, args);
    } else {
      timeout = setTimeout(() => func.apply(context, args), wait);
    }
  };
}

// 使用示例
const resizeHandler = debounce(function() {
  console.log('Window resized');
}, 200, true); // 立即执行一次，后续按照防抖逻辑

window.addEventListener('resize', resizeHandler);

function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

// 使用示例
const scrollHandler = throttle(() => {
  console.log('Scrolled');
}, 1000); // 每秒最多执行一次

window.addEventListener('scroll', scrollHandler);

function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function() {
    const context = this;
    const args = arguments;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(function() {
        if ((Date.now() - lastRan) >= limit) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}

// 使用示例
const clickHandler = throttle(() => {
  console.log('Button clicked');
}, 500); // 每500毫秒最多执行一次

document.getElementById('myButton').addEventListener('click', clickHandler);

function loadMoreData() {
  console.log('Loading more data...');
  // 模拟加载数据
}

let isFetching = false;

function handleScroll() {
  if (isFetching) return;
  
  const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
  if (scrollTop + clientHeight >= scrollHeight - 50) {
    isFetching = true;
    // 结合节流和防抖
    const throttledAndDebouncedLoad = throttle(debounce(loadMoreData, 300), 1000);
    throttledAndDebouncedLoad();
  }
}

window.addEventListener('scroll', handleScroll);