throttle的实现

什么是throttle，直接翻译就是节流的意思，打个比方，比如说中国的三峡大坝，闸门每一分钟打开一次，那么水就是一分钟流一下。在我们的应用中一般用在需要降低频率的地方，比如说：

• window的onresize，窗口变化时时触发onresize方法，如果我们在onresize做一些dom的操作，显然会大大降低浏览器的性能，所以我们可以降低触发onresize的频率来得以控制。
• 抢票软件的抢票功能（比如支付宝的抢券），用户连续点击抢票按钮发送http请求到后台，每点击一次按钮发送一次请求，会加剧后台的并发性问题，显然不合理，所以要降低访问的频率。
• window的onscroll滚动事件

节流是指阻止一个函数在很短时间内的重复调用，必须在超过规定时间间隔后才能重复调用的过程。

1. 第一次调用，立即执行。
2. 重复调用，如果超过规定时间，立即执行。
3. 重复调用，小于规定时间，阻止上一次的调用，重新设置调用定时器。

根据上面的三个步骤，实现代码如下：

function throttle(fn, delay = 1000) {
  var context;
  var args;
  var timer;
  var prev;
  var now;

  function exec() {
    fn.apply(context, args);
    prev = now;
  }

  return function () {
    context = this;
    args = arguments;

    if (timer) {
      clearTimeout(timer);
      timer = null;
    }

    if (!prev) {
      exec();
    }

    now = new Date();
    if (now - prev >= delay) {
      exec();
    } else {
      timer = setTimeout(function () {
        exec();
      }, delay);
    }
  }
}

例子：

var test = throttle(function () {

  console.log("90")

});

test();test();

结果：打印90，延迟1s后打印90；

 

参考链接：https://github.com/lodash/lodash/blob/master/throttle.js