docs/program/throttled.html

<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
  <title>throttled</title>
  <style>
    #container {
      width: 100%;
      height: 200px;
      line-height: 200px;
      text-align: center;
      color: #fff;
      background-color: #444;
      font-size: 30px;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script>
    var count = 1;
    var container = document.getElementById('container');

    function getUserAction(e) {
      container.innerHTML = count++;
    };

    container.onmousemove = throttle(getUserAction, 1000);

    // 防抖
    /**
     * @param {function} 需要执行的函数
     * @param {number} 延迟执行的时间间隔
     * @return {number[]}
     */
    function throttle(fn, wait) {
      let timeout, context, args;
      let previous = 0;

      let throttled = function () {
        context = this;
        args = arguments;

        let now = new Date();
        // 下次触发 fn 的剩余时间，间隔时间 - 当前时间与上一次 fn 执行时间的时间差
        let remaining = wait - (now - previous);

        // remaining <=0，说明当前距离上次执行的间隔时间大于等待时间，可以立即执行
        // remaining > wait，说明改了系统时间
        // 比如 previous = 9:01，now = 9:00，间隔时间 60s，那么 remaining = 120s，实际间隔时间到了也不会执行
        if (remaining <= 0 || remaining > wait) {
          if (timeout) {
            // 清除 timeout
            clearTimeout(timeout);
            timeout = null;
          }

          // 立即执行 fn
          previous = now;
          fn.apply(context, args);
        } else if (!timeout) {
          // !timeout = true, 说明没有正在等待执行的延时函数，可以立即执行
          timeout = setTimeout(() => {
            previous = new Date();
            timeout = null;
            fn.apply(context, args);
          }, remaining);
        }
      }

      // 取消
      throttled.cancel = function () {
        if (timeout) {
          clearTimeout(timeout);
          previous = 0;
          timeout = null;
        }
      }

      return throttled;
    }
  </script>
</body>

</html>