JS防抖节流

防抖

在短时间内快速的触发一件事，每次都用新的事件替代上一次，也就是说那么我们只会执行最后一次触发的事件。短时间内快速触达一件事，只会执行最后一次。

function debounce(func, delay) {
  let timeoutId;

  return function(...args) {
    if (timeoutId) {
      clearTimeout(timeoutId);
    }
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 使用防抖函数
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(handleSearch, 500));

function handleSearch(event) {
  const query = event.target.value;
  // 发送搜索请求...
}

节流

在短时间内快速触发一件事，当一件事处理函数开始执行的时候，在此期间，不允许重复

function throttle(func, delay) {
  let lastExecution = 0;

  return function(...args) {
    const now = Date.now();
    if (now - lastExecution > delay) {
      func.apply(this, args);
      lastExecution = now;
    }
  };
}

// 使用节流函数
window.addEventListener('scroll', throttle(handleScroll, 100));

function handleScroll() {
  // 更新页面元素的位置或执行其他操作...
}

总结来说，防抖主要用来处理那些连续高频触发、但只需要最后一次触发结果的场景，如窗口大小改变、输入框内容变化等。而节流更适合于需要一定频率执行函数，但不想让其过于频繁执行的场景，如滚动事件、动画帧更新等。两者都是为了优化性能和提升用户体验。