前端防抖节流代码

防抖和节流都是前端优化中常用的方式，可以提升页面性能和用户体验。以下是防抖和节流的代码实现：

1. 防抖

防抖的原理是在一定时间内，只执行一次函数，常用于防止频繁触发事件导致性能问题。

function debounce(func, delay) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  }
}

使用方式：

function handleInput() {
  // 输入框变化后的操作
}

const debouncedInput = debounce(handleInput, 500); // 500ms 内只执行一次 handleInput
inputElement.addEventListener('input', debouncedInput);

2. 节流

节流的原理是在一定时间内，最多执行一次函数，常用于防止高频率事件（如滚动、拖拽等）导致性能问题。

function throttle(func, delay) {
  let lastTime = 0;
  return function(...args) {
    const now = new Date().getTime();
    if (now - lastTime > delay) {
      func.apply(this, args);
      lastTime = now;
    }
  }
}

使用方式：

function handleScroll() {
  // 滚动时的操作
}

const throttledScroll = throttle(handleScroll, 500); // 500ms 内最多执行一次 handleScroll
window.addEventListener('scroll', throttledScroll);

需要注意的是，防抖和节流的实现方式有多种，具体选择哪种方式取决于具体的需求和场景。