当前位置：首页 > 文章列表 > 文章 > 前端 > JS节流函数怎么实现？

JS节流函数怎么实现？

2025-08-08 19:45:47 0浏览收藏

解决方案

实现节流的关键是利用定时器。一种常见的做法是“时间戳”方式，记录上次执行的时间，然后判断当前时间与上次执行时间差是否大于设定的间隔。另一种是“定时器”方式，设置一个定时器，在定时器触发时执行函数，并在定时器执行期间禁止再次触发。

以下是两种方式的JS代码示例：

1. 时间戳方式：

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

// 使用示例
function handleScroll() {
  console.log('Scroll event triggered');
}

const throttledScrollHandler = throttleByTimestamp(handleScroll, 200); // 200ms节流
window.addEventListener('scroll', throttledScrollHandler);

2. 定时器方式：

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

// 使用示例
function handleResize() {
  console.log('Resize event triggered');
}

const throttledResizeHandler = throttleByTimeout(handleResize, 300); // 300ms节流
window.addEventListener('resize', throttledResizeHandler);

时间戳方式会在第一次触发事件时立即执行，而定时器方式会在 delay 时间后才执行。选择哪种方式取决于具体需求。

节流和防抖有什么区别？

节流和防抖都是为了优化性能，减少函数执行频率。但它们的侧重点不同。节流是限制函数在一段时间内最多执行一次，比如上面提到的例子。防抖则是等待一段时间，如果这段时间内没有再次触发，才执行函数。可以想象成电梯，节流是每隔一段时间电梯就走一趟，防抖是如果有人持续按电梯，就一直等待最后一个人按完才走。

防抖的JS实现如下：

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

// 使用示例
function search(query) {
  console.log(`Searching for: ${query}`);
}

const debouncedSearch = debounce(search, 500); // 500ms防抖
const searchInput = document.getElementById('search-input');
searchInput.addEventListener('input', (e) => {
  debouncedSearch(e.target.value);
});

什么时候应该使用节流，什么时候应该使用防抖？

选择节流还是防抖，取决于具体的应用场景。

节流： 适用于需要持续响应的事件，但又不想过于频繁执行函数的情况。比如，滚动事件、resize事件、mousemove事件等。目的是保证一定的执行频率。
防抖： 适用于只需要在最后一次操作后执行函数的情况。比如，输入框搜索、表单验证、按钮提交等。目的是避免重复执行。

举个例子，如果你想在用户滚动页面时，实时显示滚动条的位置，那么应该使用节流。因为你需要持续更新滚动条的位置，但不需要每次滚动都更新。如果你想在用户输入完成后，才进行搜索，那么应该使用防抖。因为你只需要在用户停止输入后，才执行搜索。

如何优化节流函数的性能？

节流函数的性能优化主要集中在减少不必要的计算和内存占用上。

避免在节流函数内部创建新的函数： 每次调用节流函数都会创建一个新的函数，这会增加内存占用。可以将函数定义在节流函数外部，避免重复创建。
使用requestAnimationFrame： requestAnimationFrame 比 setTimeout 或 setInterval 更适合用于动画相关的节流。因为它会在浏览器下一次重绘之前执行，可以避免卡顿。
合理设置 delay 时间： delay 时间过短会导致函数执行过于频繁，过长会导致响应不及时。需要根据具体情况选择合适的 delay 时间。
避免频繁的 DOM 操作： DOM 操作会触发浏览器的重绘和重排，影响性能。应该尽量减少 DOM 操作，或者将 DOM 操作合并成一次执行。

例如，使用 requestAnimationFrame 优化节流函数：

function throttleByAnimationFrame(func) {
  let isRunning = false;
  return function(...args) {
    if (!isRunning) {
      isRunning = true;
      requestAnimationFrame(() => {
        func.apply(this, args);
        isRunning = false;
      });
    }
  }
}

// 使用示例
function updatePosition() {
  // 更新元素位置
  console.log('Updating position');
}

const throttledUpdatePosition = throttleByAnimationFrame(updatePosition);
window.addEventListener('scroll', throttledUpdatePosition);

除了时间戳和定时器，还有其他实现节流的方法吗？

除了时间戳和定时器，还有一些其他的实现节流的方法，例如：

使用 RxJS： RxJS 是一个响应式编程库，提供了丰富的操作符，可以方便地实现节流和防抖。
使用 Lodash 或 Underscore.js： Lodash 和 Underscore.js 是常用的 JavaScript 工具库，提供了 throttle 和 debounce 函数。
自定义实现： 可以根据具体需求，自定义实现节流函数。例如，可以使用闭包来保存状态，或者使用位运算来优化性能。

使用 Lodash 实现节流：

const throttledFunction = _.throttle(function() {
  console.log('Lodash throttled function');
}, 500);

window.addEventListener('scroll', throttledFunction);

选择哪种方法取决于具体的需求和项目情况。如果项目已经使用了 RxJS 或 Lodash，那么可以直接使用它们提供的函数。如果需要自定义实现，可以参考时间戳和定时器的方法。

今天关于《JS节流函数怎么实现？》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于时间戳,定时器,性能优化,防抖,JS节流函数的内容请关注golang学习网公众号！

时间戳定时器性能优化防抖 JS节流函数