节流的原理很简单:

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

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

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

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

使用时间戳

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

例子依然是用讲 debounce 中的例子,如果你要使用:

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

使用定时器

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

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

比较两个方法:

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

双剑合璧

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

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

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