节流|算法专题 | 前端进阶之旅 - 前端求职面试刷题宝典

# 定义

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

# 实现

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

# 时间戳实现

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

    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);
        }
      }
    }