前言

js的典型的场景

  • 监听页面的scroll事件
  • 拖拽事件
  • 监听鼠标的 mousemove 事件
    …

这些事件会频繁触发会影响性能，如果使用节流，降低频次，保留了用户体验，又提升了执行速度，节省资源。

原理

节流的原理：持续触发某事件，每隔一段时间，只执行一次。

通俗点说，3 秒内多次调用函数，但是在 3 秒间隔内只执行一次，第一次执行后 3 秒 无视后面所有的函数调用请求，也不会延长时间间隔。3 秒间隔结束后则开始执行新的函数调用请求，然后在这新的 3 秒内依旧无视后面所有的函数调用请求，以此类推。

简单来说：每隔单位时间（ 3 秒），只执行一次。

实现方式

目前比较主流的实现方式有两种：时间戳、定时器。

时间戳实现

使用时间戳实现：首先初始化执行事件的时间previous为0，然后将当前的时间戳减去上次执行时间（now - previous），如果大于wait，则直接执行函数，并且将此时的执行时间now赋给previous（previous = now）。

由于首次previous = 0，则此时函数第一次触发就会立即执行。

后续则每隔wait时间执行一次，如果停止触发，则不会再执行函数。

  1. // 由于一开始now - 0 > wait，则这个写法，时间会立即执行，没过一秒会执行一次，停止触发，则不会再执行事件
  2. function throttle(func, wait = 500) {
  3.   let context, now;
  4.   let previous = 0; // 设置过去的执行时间初始值为0
  5.   return function (...args) {
  6.     context = this;
  7.     now = +(Date.now() || new Date().getTime());
  8.     if (now - previous > wait) {
  9.       func.apply(context, args);
  10.       previous = now;
  11.     }
  12.   };
  13. }

定时器实现

使用定时器实现：首先初始化timeout，然后定义!timeout为true的情况下，直接执行setTimeout，，等待wait时间后执行函数，然后清空timeout，以此类推，重新进入也会按上述执行。

由于进入函数，就执行setTimeout，所以不会立即触发函数执行。

后续则每隔wait时间执行一次，如果停止触发，而后还会触发执行一次函数。

  1. // 由于一进入就创建了定时器，所以不会立即触发函数执行
  2. function throttle(func, wait = 500) {
  3.   let context, timeout;
  5.   return function (...args) {
  6.     context = this;
  8.     if (!timeout) {
  9.       timeout = setTimeout(function () {
  10.         timeout = null;
  11.         func.apply(context, args);
  12.       }, wait);
  13.     }
  14.   };
  15. }

合并版本

如果，我们需要既刚开始就立即执行，停止触发后，还会触发执行一次函数。

下面，我们将定时器和时间戳合并，组成一个全新的节流版本。

  1. function throttle(func, wait = 500) {
  2.   let context, timeout, result;
  3.   let previous = 0;
  4.   const throttled = function (...args) {
  5.     context = this;
  6.     const now = +(Date.now() || new Date().getTime()); // 当前时间
  7.     // 下次触发 func 剩余时间
  8.     const remaining = wait - (now - previous);
  10.     // 如果没有剩余时间或者改了系统时间,这时候不需要等待，直接立即执行，这样就会第一次就执行
  11.     if (remaining <= 0 || remaining > wait) {
  12.       if (timeout) {
  13.         clearTimeout(timeout);
  14.         timeout = null;
  15.       }
  16.       previous = now;
  17.       func.apply(context, args);
  18.     } else if (!timeout) {
  19.       // 剩余的情况就是remaining<=wait的情况，这里使用setTimeout就可以最后也会执行一次
  20.       timeout = setTimeout(function () {
  21.         timeout = null;
  22.         previous = +(Date.now() || new Date().getTime()); // 这里是将previous重新赋值当前时间
  23.         func.apply(context, args);
  24.       }, remaining);
  25.     }
  26.   };
  27.   return throttled;
  28. }

合并版本优化

由于合并后的版本并没用返回值的优化+取消功能。

下面对代码进行返回值+取消功能优化：

  1. function throttle(func, wait = 500) {
  2.   let context, timeout, result;
  3.   let previous = 0;
  5.   const showResult = function (e1, e2) {
  6.     result = func.apply(e1, e2);
  7.     return result;
  8.   };
  10.   const throttled = function (...args) {
  11.     context = this;
  12.     const now = +(Date.now() || new Date().getTime()); // 当前时间
  13.     // 下次触发 func 剩余时间
  14.     const remaining = wait - (now - previous);
  16.     // 如果没有剩余时间或者改了系统时间,这时候不需要等待，直接立即执行，这样就会第一次就执行
  17.     if (remaining <= 0 || remaining > wait) {
  18.       if (timeout) {
  19.         clearTimeout(timeout);
  20.         timeout = null;
  21.       }
  22.       previous = now;
  23.       showResult(context, args);
  24.     } else if (!timeout) {
  25.       // 剩余的情况就是remaining<=wait的情况，这里使用setTimeout就可以最后也会执行一次
  26.       timeout = setTimeout(function () {
  27.         timeout = null;
  28.         previous = +(Date.now() || new Date().getTime()); // 这里是将previous重新赋值当前时间
  29.         showResult(context, args);
  30.       }, remaining);
  31.     }
  32.   };
  34.   throttled.cancel = function () {
  35.     if (timeout !== undefined) {
  36.       clearTimeout(timeout);
  37.     }
  38.     previous = 0;
  39.     context = timeout = result = undefined;
  40.   };
  41.   return throttled;
  42. }

功能性优化

有时候，我们也希望无头有尾，或者有头无尾。

  1. function throttle(func, wait = 500, options = {}) {
  2.   let context, timeout, result;
  3.   let previous = 0;
  5.   // 如果同时设置无头无尾，则直接使用默认设置,其他情况，则走下述操作
  6.   if (!(options.leading === false && options.trailing === false)) {
  7.     leading = !!options.leading; // 默认去除立即执行部分
  8.     trailing = "trailing" in options ? !!options.trailing : true; // 默认保留尾部
  9.   }
  11.   // 返回原函数的return
  12.   const showResult = function (e1, e2) {
  13.     result = func.apply(e1, e2);
  14.     return result;
  15.   };
  17.   // 获取当前时间
  18.   const getNow = function () {
  19.     return +(Date.now() || new Date().getTime());
  20.   };
  22.   const throttled = function (...args) {
  23.     context = this;
  24.     const now = getNow(); // 当前时间
  25.     // 下次触发 func 剩余时间
  26.     if (!previous && leading === false) previous = now;
  27.     const remaining = wait - (now - previous);
  29.     // 如果没有剩余时间或者改了系统时间,这时候不需要等待，直接立即执行，这样就会第一次就执行
  30.     if (remaining <= 0 || remaining > wait) {
  31.       if (timeout) {
  32.         clearTimeout(timeout);
  33.         timeout = null;
  34.       }
  35.       previous = now;
  36.       showResult(context, args);
  37.     } else if (!timeout && trailing !== false) {
  38.       // 剩余的情况就是remaining<=wait的情况，这里使用setTimeout就可以最后也会执行一次
  39.       timeout = setTimeout(function () {
  40.         timeout = null;
  41.         previous = options.leading === false ? 0 : getNow(); // 这里是将previous重新赋值当前时间
  42.         showResult(context, args);
  43.       }, remaining);
  44.     }
  45.   };
  47.   throttled.cancel = function () {
  48.     if (timeout !== undefined) {
  49.       clearTimeout(timeout);
  50.     }
  51.     previous = 0;
  52.     context = timeout = result = undefined;
  53.   };
  54.   return throttled;
  55. }

这里，如果options不传参数，函数默认设置

  1. let leading = false
  2. let trailing = true

也就是无头有尾。

如果同时设置无头无尾，则会直接采用默认设置，无头有尾。

  1. // 如果同时设置无头无尾，则直接使用默认设置,其他情况，则走下述操作
  2. if (!(options.leading === false && options.trailing === false)) {
  3.   leading = !!options.leading; // 默认去除立即执行部分
  4.   trailing = "trailing" in options ? !!options.trailing : true; // 默认保留尾部
  5. }

演示地址

可以去Github仓库查看演示代码

跟着大佬学系列

主要是日常对每个进阶知识点的摸透，跟着大佬一起去深入了解JavaScript的语言艺术。

后续会一直更新，希望各位看官不要吝啬手中的赞。

❤️ 感谢各位的支持！！！

❤️ 如果有错误或者不严谨的地方，请务必给予指正，十分感谢！！！

❤️ 喜欢或者有所启发，欢迎 star！！！

参考