防抖与节流：两者区别、各自作用、示例代码

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

两者用途

防抖（Debounce）和节流（Throttle）是前端开发中常用的两种性能优化手段，主要用于限制频繁触发的事件回调函数的执行频率，避免过度渲染、频繁网络请求等问题，从而提高用户体验和节约系统资源。

防抖（Debounce）

防抖的核心思想是，当事件被快速连续触发时，仅在事件停止触发并等待一段时间后才执行回调函数。如果在这段等待期间又有新的触发发生，则重新开始等待。简而言之，防抖确保了一段时间内的最后一次操作会被执行。

JavaScript防抖函数示例：

function debounce(func, delay) {
  let timeoutId;

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

// 使用示例：
const inputElement = document.getElementById('searchInput');
const search = debounce((event) => {
  console.log('Searching for:', event.target.value);
  // 这里是发起搜索请求的实际逻辑...
}, 300); // 延迟300毫秒

inputElement.addEventListener('input', search);

在这个示例中，当用户在搜索框中快速输入时，search函数不会立即执行，而是等待用户停止输入（即在300毫秒内不再有新的输入事件）后才会真正发起搜索请求。

节流（Throttle）

节流则是指允许函数在一个固定的时间间隔内只执行一次，即使在这段时间内多次触发事件。 这样可以保证事件回调至少每隔一定时间执行一次，而不是连续执行。

JavaScript节流函数示例：

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

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

// 使用示例：
const scrollHandler = throttle(() => {
  console.log('Scrolled!');
  // 这里是处理滚动事件的实际逻辑...
}, 200); // 每隔200毫秒最多执行一次

window.addEventListener('scroll', scrollHandler);

在这个示例中，即使用户快速滚动页面，scrollHandler函数也会保持每200毫秒执行一次，而不是随着滚动事件的每一次触发都执行，从而避免了过于频繁的计算和渲染。