定义

节流(throttle):不管事件触发频率多高,只在单位时间内执行一次。

foo

实现

有两种方式可以实现节流,使用时间戳和定时器。

时间戳实现

第一次事件肯定触发,最后一次不会触发

    function throttle(event, time) {
      let pre = 0;
      return function (...args) {
        if (Date.now() - pre > time) {
          pre = Date.now();
          event.apply(this, args);
        }
      }

定时器实现

第一次事件不会触发,最后一次一定触发

    function throttle(event, time) {
      let timer = null;
      return function (...args) {
        if (!timer) {
          timer = setTimeout(() => {
            timer = null;
            event.apply(this, args);
          }, time);
        }
      }
    }

结合版

定时器和时间戳的结合版,也相当于节流和防抖的结合版,第一次和最后一次都会触发

    function throttle(event, time) {
      let pre = 0;
      let timer = null;
      return function (...args) {
        if (Date.now() - pre > time) {
          clearTimeout(timer);
          timer = null;
          pre = Date.now();
          event.apply(this, args);
        } else if (!timer) {
          timer = setTimeout(() => {
            event.apply(this, args);
          }, time);
        }
      }
    }

Last Updated: 8/4/2019, 9:40:51 PM