JavaScript 中的函数大多数情况下都是由用户主动调用触发的，除非是函数本身的实现不合 理，否则我们一般不会遇到跟性能相关的问题。但在一些少数情况下，函数的触发不是由用户直 接控制的。在这些场景下，函数有可能被非常频繁地调用，而造成大的性能问题。下面将列举一 些这样的场景。

  • window.onresize事件
  • mousemove事件
  • 上传进度事件

    原理

    关于函数节流的代码实现有许多种，下面的 throttle 函数的原理是，将即将被执行的函数用 setTimeout 延迟一段时间执行。如果该次延迟执行还没有完成，则忽略接下来调用该函数的请求。 throttle 函数接受 2 个参数，第一个参数为需要被延迟执行的函数，第二个参数为延迟执行的时 间。具体实现代码如下：
    1. var throttle = function ( fn, interval ) {
    2.    var __self = fn, // 保存需要被延迟执行的函数引用
    3.            timer, // 定时器
    4.            firstTime = true; // 是否是第一次调用
    5. return function () {
    6.        var args = arguments,
    7.            __me = this;
    8. if ( firstTime ) { // 如果是第一次调用，不需延迟执行
    9.        __self.apply(__me, args);
    10.        return firstTime = false;
    11. }
    12. if ( timer ) { // 如果定时器还在，说明前一次延迟执行还没有完成
    13.        return false; 
    14.  }
    15. timer = setTimeout(function () { // 延迟一段时间执行
    16.        clearTimeout(timer);
    17.        timer = null;
    18.        __self.apply(__me, args);
    19.        }, interval || 500 );
    20.    };
    21. };