js防抖和节流函数封装

防抖和节流是两种常用的函数优化技术，可以用来限制函数的执行频率，提高性能和用户体验。

防抖函数的作用是在短时间内连续触发同一事件时，只执行最后一次操作，而忽略之前的操作。可以用于处理频繁触发的事件，比如窗口大小改变、输入框输入等。

下面是一个简单的防抖函数封装示例：

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

使用方式示例：

function handleInput() {
  // 处理输入事件
}

const debouncedHandleInput = debounce(handleInput, 300); // 创建防抖函数

inputElement.addEventListener('input', debouncedHandleInput); // 绑定防抖函数到输入框的输入事件

节流函数的作用是在一定时间间隔内只执行一次操作，可以用于处理高频率触发的事件，比如滚动事件、鼠标移动事件等。

下面是一个简单的节流函数封装示例：

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

使用方式示例：

function handleScroll() {
  // 处理滚动事件
}

const throttledHandleScroll = throttle(handleScroll, 300); // 创建节流函数

window.addEventListener('scroll', throttledHandleScroll); // 绑定节流函数到窗口的滚动事件

以上是基本的防抖和节流函数封装示例，可以根据实际需求进行调整和扩展。希望能对你有所帮助！