JavaScript防抖与节流怎样减少请求次数 - 问答

在 JavaScript 中，防抖（debounce）和节流（throttle）是两种常用的优化高频率触发事件的技术，它们都可以用来减少请求次数。

防抖（debounce）：防抖的基本原理是在一定时间内，无论触发多少次事件，都只执行一次指定的函数。当事件停止触发后，才会再次执行。适用于如输入框实时搜索、窗口大小调整等场景。

实现方法：

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

使用示例：

const searchInput = document.querySelector('#search-input');
const fetchData = () => { /* 请求数据的操作 */ };

const debouncedFetchData = debounce(fetchData, 500);
searchInput.addEventListener('input', debouncedFetchData);

节流（throttle）：节流的基本原理是在一定时间内，只执行一次指定的函数。与防抖不同的是，节流不会因为事件的连续触发而立即执行，而是在固定的时间间隔后执行。适用于如滚动加载、鼠标移动等场景。

实现方法：

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

使用示例：

const scrollContainer = document.querySelector('#scroll-container');
const loadData = () => { /* 请求数据的操作 */ };

const throttledLoadData = throttle(loadData, 200);
scrollContainer.addEventListener('scroll', throttledLoadData);

通过这两种技术，我们可以有效地减少高频率触发事件的请求次数，提高程序的性能。

0 赞

0 踩