JS 防抖和节流

防抖（debounce）和节流（throttle）是JavaScript中常用的性能优化技术，用于限制某些高频率触发的函数执行次数，减少不必要的计算和网络请求。下面分别介绍防抖和节流的实现方式。

防抖（Debounce）

防抖的原理是在事件触发后等待一段时间，如果在这段时间内没有再次触发该事件，就执行函数；如果再次触发了该事件，则重新计时。这样可以确保只有事件停止触发后才会执行函数。

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

使用示例：

// 定义一个需要防抖处理的函数
function search() {
  // 执行搜索操作
}

// 创建防抖函数
const debouncedSearch = debounce(search, 300);

// 添加事件监听器
const searchInput = document.getElementById("search-input");
searchInput.addEventListener("input", debouncedSearch);

当用户输入搜索关键字时，会触发input事件并调用debouncedSearch函数。但由于应用了防抖，只有在停止输入300毫秒后才会实际执行搜索操作。

节流（Throttle）

节流的原理是规定一个时间间隔，在这个时间间隔内，只能执行一次函数。如果在该时间间隔内多次触发该函数，只有第一次会被执行，后续的触发将被忽略。

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

 使用示例：

// 定义一个需要节流处理的函数
function scrollHandler() {
  // 处理滚动事件
}

// 创建节流函数
const throttledScroll = throttle(scrollHandler, 200);

// 添加事件监听器
window.addEventListener("scroll", throttledScroll);

 当用户滚动页面时，会触发scroll事件并调用throttledScroll函数。由于应用了节流，每200毫秒才会实际处理一次滚动事件，减少了函数的触发次数。