封装防抖和节流函数

防抖函数的作用是，在事件触发后等待一定时间（delay），如果在这段时间内没有再次触发事件，才执行回调函数。如果在这段时间内又触发了事件，则重新计时。

防抖函数的实现：

function debounce(func, delay) {
  let timeoutId;

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

使用示例：

function handleInput() {
  console.log('Input event debounced');
}

const debouncedHandleInput = debounce(handleInput, 300);
input.addEventListener('input', debouncedHandleInput);

一般使用在输入框搜索，按钮点击，防止重复提交，实时搜索

节流函数的实现：

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

节流函数的作用是，在一定时间间隔（delay）内只执行一次回调函数。如果在这段时间内多次触发事件，只有第一次触发会执行回调函数，后续触发会被忽略。

使用示例：

function handleScroll() {
  console.log('Scroll event throttled');
}

const throttledHandleScroll = throttle(handleScroll, 300);
window.addEventListener('scroll', throttledHandleScroll);

一般使用在页面滚动，窗口调整，鼠标移动，频繁操作限制