javascript_如何实现函数节流-js教程-PHP中文网

javascript_如何实现函数节流

狼影

发布： 2025-12-04 20:48:54

原创

759人浏览过

函数节流是控制高频事件触发下函数执行频率的优化技术，核心思想是在指定时间间隔内最多执行一次。通过时间戳实现时，记录上次执行时间，差值达标才执行并更新时间；通过定时器实现时，利用setTimeout延迟执行并防止重复创建；改进版结合两者，支持首次立即执行且末次有效，提升体验。根据需求选择方案，本质是节约资源、避免性能损耗。

javascript_如何实现函数节流

函数节流（Throttling）是一种优化手段，用于控制函数在一段时间内最多执行一次。它常用于处理高频触发事件，比如窗口滚动、鼠标移动或窗口缩放，避免因函数执行过于频繁而导致性能问题。

什么是函数节流

节流的核心思想是：无论事件触发多快，回调函数在指定的时间间隔内只执行一次。例如设置节流间隔为200ms，那么在这200ms内无论触发多少次事件，函数仅执行一次。

使用时间戳实现节流

通过记录上次执行时间，判断当前时间与上次执行时间的差值是否超过设定间隔，来决定是否执行函数。

每次触发时获取当前时间戳
与上一次执行的时间比较，若差值大于等于等待时间，则执行函数并更新时间戳
否则不执行

代码实现：

立即学习“Java免费学习笔记（深入）”；

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

登录后复制

使用定时器实现节流

利用 setTimeout 控制函数延迟执行，确保在指定时间内不会重复调用。

php配置文件php.ini的中文注释版

php配置文件php.ini的中文注释版是一本由多位作者编著的有关PHP内部实现的开源书籍。从环境准备到代码实现，从实现过程到细节延展，从变量、函数、对象到内存、Zend虚拟机…… 如此种种，道尽PHP之风流。

376

查看详情

触发事件时，如果定时器不存在，则设置一个延迟执行的定时器
在延迟期间再次触发，不会创建新定时器
定时器执行后清除标识，允许下一次触发

代码实现：

立即学习“Java免费学习笔记（深入）”；

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

登录后复制

结合两种方式的改进版节流

有些场景希望首次触发立即执行，最后一次触发也能被执行。可以将时间戳和定时器结合使用，提升用户体验。

function throttle(func, delay) {
  let timer = null;
  let previous = 0;
  return function(...args) {
    const now = Date.now();
    const remaining = delay - (now - previous);
<pre class="brush:php;toolbar:false;">if (remaining <= 0) {
  if (timer) {
    clearTimeout(timer);
    timer = null;
  }
  func.apply(this, args);
  previous = now;
} else if (!timer) {
  timer = setTimeout(() => {
    previous = Date.now();
    timer = null;
    func.apply(this, args);
  }, remaining);
}

登录后复制

}; }

基本上就这些。根据实际需求选择合适的方式，多数情况下简单的时间戳或定时器方案已足够使用。关键是理解节流的本质：控制执行频率，节省资源。

以上就是javascript_如何实现函数节流的详细内容，更多请关注php中文网其它相关文章！