节流

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

实现原理： 持续触发事件，每隔一段时间，只执行一次。节流根据首次和尾次是否执行，实现方式不同。两种主流的实现方式。一种是使用时间戳，一种是使用定时器。

使用时间戳

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

使用定时器

  1. function throttle(func, wait) {
  2.     var timeFlag;
  3.     return function () {
  4.         if (!timeFlag) {
  5.             timeFlag = setTimeout(() => {
  6.                 timeFlag = null;
  7.                 func.apply(this, arguments)
  8.             }, wait)
  9.         }
  10.     }
  11. }

比较

  1. 使用时间戳的会立即执行，使用定时器的会在一定时间后执行
  2. 第一种在事件停止后就没办法再执行，第二种事件停止后依旧会执行一次事件

同时使用时间戳和定时器

需求：鼠标移入时执行，鼠标停止时执行。
第三版

  1. function throttle(func, wait) {
  2.     var timeout, context, args, result;
  3.     var previous = 0;
  4.     var later = function () {
  5.         previous = +new Date();
  6.         timeout = null;
  7.         func.apply(context, args)
  8.     };
  10.     var throttled = function () {
  11.         var now = +new Date();
  12.         // 下次触发的剩余时间
  13.         var remainging = wait - (now - previous);
  14.         context = this;
  15.         args = arguments;
  16.         if (remainging < 0 || remainging > wait) {
  17.             if (timeout) {
  18.                 clearTimeout(timeout);
  19.                 timeout = null;
  20.             }
  21.             previous = now;
  22.             func.apply(context, args)
  23.         } else if (!timeout) {
  24.             timeout = setTimeout(later, remainging);
  25.         }
  26.     };
  27.     return throttled
  28. }

可以配置的截溜函数

leading：false:表示禁止第一次执行
trailing：false表示禁用停止触发回调

  2. function throttle(func, wait, options) {
  3.     var timeout, context, args, result;
  4.     var previous;
  5.     if (!options) options = {};
  6.     var later = function () {
  7.         previous = options.leading === false ? 0 : new Date().getTime();
  8.         timeout = null;
  9.         func.apply(context, args);
  10.         if (!timeout) {
  11.             context = args = null
  12.         }
  13.     };
  14.     var throttled = function () {
  15.         var now = new Date().getTime();
  16.         if (!previous && options.leading === false) previous = now;
  17.         var remaining = wait - (now - previous);
  18.         context = this;
  19.         args = arguments;
  20.         if (remaining <= 0 || remaining > wait) {
  21.             if (timeout) {
  22.                 clearTimeout(timeout);
  23.                 timeout = null;
  24.             }
  25.             previous = now;
  26.             func.apply(context, args);
  27.             if (!timeout) context = args = null;
  28.         } else if (!timeout && options.trailing !== false) {
  29.             timeout = setTimeout(later, remaining)
  30.         }
  31.     };
  32.     return throttled
  33. }

取消

  1. throttled.cancel = function() {
  2.     clearTimeout(timeout);
  3.     previous = 0;
  4.     timeout = null;
  5. }

注意undersore实现的问题

leading：false 和 trailing: false 不能同时设置

leading：false 和 trailing: false 不能同时设置