JavaScript函数节流详解：解决高频触发与优化性能

本文详细解析JavaScript函数节流（Throttle）的核心概念及具体应用方法，旨在为开发者提供实用的参考方案。

高频触发场景与问题背景

在近期开发网页的过程中，遇到一个常见需求：当浏览器窗口尺寸发生变化时，需要动态调整部分页面元素的大小。基于这一场景，很自然地会联想到利用window对象的resize事件来监听窗口变化。


<!DOCTYPE html>
<html>
<head>
  <title>Throttle</title>
</head>
<body>
  <script type="text/javascript">
    n=0;
    function resizehandler(){
      console.log(new Date().getTime());
      console.log(++n);
    }
    window.onresize=resizehandler;
  </script>
</body>
</html>

初步实现该功能后，通过拖拽方式改变浏览器窗口大小，并观察控制台输出日志。

高频触发场景与问题背景

结果显示，简单的窗口拖拽操作导致resizeHandler()方法被执行了52次。这显然超出了预期。考虑到resizeHandler内部逻辑复杂，甚至可能包含向服务器发送Ajax请求的操作，若每次微小的窗口变动都触发如此高频的执行，将严重消耗资源并影响性能。

函数节流原理与基础实现

函数节流（Throttle）

实际上，开发者的初衷仅在窗口尺寸最终确定后执行一次页面调整即可。然而，window的resize事件并非在调整结束后才触发，而是以极高的频率持续调用，直到窗口大小停止变化。类似的机制也存在于鼠标的mousemove事件中，它们都会在短时间内重复触发。

在经典著作《JavaScript高级程序设计》中，专门介绍了应对此类高频触发问题的函数节流技术。


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

其实现原理相对直观：利用定时器（setTimeout）将函数的执行延迟500毫秒。如果在延迟期间函数再次被调用，则清除上一次的定时器，并重新设置一个新的500毫秒延迟。如此往复，确保函数在指定时间窗口内只执行一次。基于此原理，前文的代码可以优化为如下形式：


<script type="text/javascript">
n=0;
function resizehandler(){
  console.log(new Date().getTime());
  console.log(++n);
}
function throttle(method,context){
  clearTimeout(method.tId);
  method.tId=setTimeout(function(){
    method.call(context);
  },500);
}
window.onresize=function(){
  throttle(resizehandler,window);
};
</script>

再次进行拖拽测试，控制台显示该方法仅执行了一次，达到了预期效果。

高频触发场景与问题背景

闭包方案对比与优劣分析

另一种实现思路

网络上还存在另一种函数节流的实现方案，其代码结构如下：


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

经过测试，该方案同样能实现预期的节流效果。


<script type="text/javascript">
n=0;
function resizehandler(){
  console.log(new Date().getTime());
  console.log(++n);
}
function throttle(method,delay){
  var timer=null;
  return function(){
    var context=this, args=arguments;
    clearTimeout(timer);
    timer=setTimeout(function(){
      method.apply(context,args);
    },delay);
  }
}
window.onresize=throttle(resizehandler,500);//因为返回函数句柄，不用包装函数了
</script>

高频触发场景与问题背景

方案对比

这两种方法均基于setTimeout实现。主要区别在于，第二种方案引入了一个延迟执行时间的参数，而第一种方案若要实现相同功能，只需额外添加一个参数即可。

在变量存储方式上，第一种方案将定时器ID（tId）作为函数的一个属性进行保存；第二种方案则通过闭包来存储定时器变量。从个人角度来看，两者差异不大，但第一种方案更为简洁且高效，因此更受青睐。

固定间隔执行的高级应用

新场景需求

随后，在处理类似百度首页搜索框的自动提示功能时，我在文本输入框（input）上绑定了keyup事件，旨在每次键盘按键释放时自动显示提示。为了避免提示过于频繁，我直接应用了上述节流方法。然而，结果却不尽如人意：只有当用户停止输入并等待500毫秒后，提示才会出现；而在用户持续输入的过程中，没有任何提示显示。检查代码后发现，只要用户在500毫秒内按下键盘，提示函数就会不断被重置延迟，导致只有在输入停止时才会触发，这显然不符合交互预期。

能否在函数节流的基础上，实现每隔固定时间就执行一次的功能？

改进方案

通过查阅资料，我们可以基于第二种写法（因为第一种写法若为函数扩展多个变量，结构略显杂乱）进行改进，并添加一个参数来定义必须执行的固定间隔时间。


function throttle(method,delay,duration){
  var timer=null, begin=new Date();
  return function(){
    var context=this, args=arguments, current=new Date();;
    clearTimeout(timer);
    if(current-begin>=duration){
       method.apply(context,args);
       begin=current;
    }else{
      timer=setTimeout(function(){
        method.apply(context,args);
      },delay);
    }
  }
}

在实现中，我们判断距离上次执行的时间间隔，如果超过设定的时间阈值，则立即执行一次函数；否则，继续按原逻辑延迟执行。以之前的窗口resize为例，测试效果如下：


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

高频触发场景与问题背景

测试结果证实，该方案既避免了高频执行，又确保了在持续操作过程中能按固定间隔输出结果，兼顾了性能与用户体验。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

JavaScript函数节流（Throttle）原理与实战实现

高频触发场景与问题背景

函数节流原理与基础实现

闭包方案对比与优劣分析

固定间隔执行的高级应用

实用工具推荐