JavaScript函数节流实现与优化详解

问题背景：频繁触发带来的性能隐患

在进行前端开发时，经常需要监听 window.onresize 或 keydown 等事件。如果直接在事件中调用复杂的计算逻辑或发起 Ajax 请求，由于事件的触发非常频繁，可能会导致：

• 页面渲染卡顿，影响用户体验。
• 短时间内向服务器发送大量重复请求，增加服务器负担。

例如，拖动浏览器窗口改变大小时，可能瞬间触发数十次 resize 事件，而开发者往往只需要在窗口最终确定大小后进行一次布局调整。

基础实现：利用 clearTimeout 重置延迟

最简单的节流方案是利用定时器（Timer）。其核心思想是：每次调用前清除上一次的定时器，并重新设置一个新的延迟执行时间。这样，只有当用户在指定的时间间隔内停止触发事件时，回调函数才会真正执行。

第1步：定义基础节流函数

我们将 method（要执行的函数）作为参数传入，并通过闭包保存定时器 ID，防止被覆盖。

function throttle(method, context) {
  clearTimeout(method.tId);
  method.tId = setTimeout(function () {
    method.call(context);
  }, 500);
}

第2步：应用 Resize 场景测试

结合 window.onresize 事件使用。注意，此处我们需要一个计数器来验证执行次数。

n = 0;
function resizehandler() {
  console.log(new Date().getTime());
  console.log(++n);
}
window.onresize = function () {
  throttle(resizehandler, window);
};

在未做节流的原始状态下，快速拖拽窗口会导致控制台打印出大量的执行记录，证明函数被频繁调用。应用上述节流代码后：

可以看到，无论怎么快速拖拽，resizehandler 仅在操作结束后的约 500 毫秒才执行了一次。这有效减少了不必要的工作负载。

进阶优化：分离配置与封装闭包

第一种方案虽然简单，但将定时器 ID 挂载在了业务函数本身 (method)上，这在某些严格编码规范下并不提倡。更通用的做法是使用闭包返回一个新的函数，同时引入 delay 参数让延时自定义。

第3步：封装通用的 Throttle 工厂函数

function throttle(method, delay) {
  var timer = null;
  return function () {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      method.apply(context, args);
    }, delay);
  };
}

第4步：改造事件监听

由于该函数返回的是新的包装函数，我们可以直接将返回值赋值给事件监听器：

function resizehandler() {
  console.log(new Date().getTime());
  console.log(++n);
}
// 将节流包装后的函数直接赋给 onresize
window.onresize = throttle(resizehandler, 500); 

效果与方法一相同，但这种写法更加解耦，且能正确保留 this 指向和 arguments 参数，兼容性更好。

深层需求：解决“长时间操作无响应”的问题

上述两种方法属于防抖的一种变体（或者说是在特定场景下的严格节流）。它们的缺点是：如果在延迟期间用户一直在高频操作（如快速敲击键盘或持续拖拽），函数会一直被推迟，直到用户完全停下来才会执行。对于搜索框联想提示等需求来说，用户希望每隔一段时间就能看到反馈，而不是必须停止输入才能看到结果。

第5步：添加最短执行时间参数

为了兼顾“避免频繁执行”和“定期执行”，我们需要在节流逻辑中加入一个绝对的时间判断。设定一个 duration，即最小执行间隔。

function throttle(method, delay, duration) {
  var timer = null, begin = new Date();
  return function () {
    var context = this, args = arguments, current = new Date();
    if (current - begin >= duration) {
       // 超过最小间隔，立即执行
       method.apply(context, args);
       begin = current;
    } else {
       // 未超间隔，采用之前的定时策略
       clearTimeout(timer);
       timer = setTimeout(function () {
         method.apply(context, args);
       }, delay);
    }
  };
}

第6步：对比测试效果

现在调用时增加第三个参数（最小间隔）：

window.onresize = throttle(resizehandler, 100, 200);

在此设置下，如果连续触发：
1. 第一次立即进入等待。
2. 只要两次触发的时间差小于 200ms，就重置 100ms 后的定时器。
3. 一旦累积时长达到 200ms，则强制执行一次并重置计时起点。
这种方式既避免了极端频繁的调用，又保证了操作的即时反馈。

总结

JavaScript 函数节流（Throttle）的核心目的是限制函数的执行频率。简单的防抖式节流适合窗口缩放等以“最终状态”为导向的操作；而在需要过程反馈的场景中，建议采用加入了固定间隔判断的高级版本。合理运用这些技巧，能显著提升 Web 应用的流畅度。

以上就是 JavaScript函数节流原理及用法的详细内容，更多关于JavaScript程序设计优化的资料请关注本站其它相关文章！