节流的原理很简单：

如果你持续触发事件，每隔一段时间，只执行一次事件。

根据首次是否执行以及结束后是否执行，效果有所不同，实现的方式也有所不同。

我们用 leading 代表首次是否执行，trailing 代表结束后是否再执行一次。

关于节流的实现，有两种主流的实现方式，一种是使用时间戳，一种是设置定时器。

使用时间戳

  1. function throttle(func, wait) {
  2.     var context, args;
  3.     var previous = 0;
  5.     return function() {
  6.         var now = +new Date();
  7.         context = this;
  8.         args = arguments;
  9.         if (now - previous > wait) {
  10.             func.apply(context, args);
  11.             previous = now;
  12.         }
  13.     }
  14. }

例子依然是用讲 debounce 中的例子，如果你要使用：

  1. container.onmousemove = throttle(getUserAction, 1000);

使用定时器

当触发事件的时候，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行，直到定时器执行，然后执行函数，清空定时器，这样就可以设置下个定时器。

  1. function throttle(func, wait) {
  2.     var timeout;
  3.     var previous = 0;
  5.     return function() {
  6.         context = this;
  7.         args = arguments;
  8.         if (!timeout) {
  9.             timeout = setTimeout(function(){
  10.                 timeout = null;
  11.                 func.apply(context, args)
  12.             }, wait)
  13.         }
  15.     }
  16. }

比较两个方法：

  1. 第一种事件会立刻执行，第二种事件会在 n 秒后第一次执行
  2. 第一种事件停止触发后没有办法再执行事件，第二种事件停止触发后依然会再执行一次事件

双剑合璧

那我们想要一个什么样的呢？
有人就说了：我想要一个有头有尾的！就是鼠标移入能立刻执行，停止触发的时候还能再执行一次！
所以我们综合两者的优势，然后双剑合璧，写一版代码：

  1. // 第三版
  2. function throttle(func, wait) {
  3.     var timeout, context, args, result;
  4.     var previous = 0;
  6.     var later = function() {
  7.         previous = +new Date();
  8.         timeout = null;
  9.         func.apply(context, args)
  10.     };
  12.     var throttled = function() {
  13.         var now = +new Date();
  14.         //下次触发 func 剩余的时间
  15.         var remaining = wait - (now - previous);
  16.         context = this;
  17.         args = arguments;
  18.          // 如果没有剩余的时间了或者你改了系统时间
  19.         if (remaining <= 0 || remaining > wait) {
  20.             if (timeout) {
  21.                 clearTimeout(timeout);
  22.                 timeout = null;
  23.             }
  24.             previous = now;
  25.             func.apply(context, args);
  26.         } else if (!timeout) {
  27.             timeout = setTimeout(later, remaining);
  28.         }
  29.     };
  30.     return throttled;
  31. }

https://github.com/mqyqingfeng/Blog/issues/26