js函數防抖，節流

時間 2019-11-08

原文原文鏈接

防抖：防抖是任務頻繁觸發的狀況下，只有任務觸發的間隔超過指定間隔的時候，任務纔會執行，通常用於輸入框實時搜索，相似上電梯，進電梯後2s內電梯運行，這時有人又進入電梯，則從新歸爲2s後再運行

<body>
  <button>防抖函數</button>
  <script>
    function onAction() {
      console.log("防抖函數");
    }

    function debounce(fn, time) {
      let timer = null;
      return function () {
        if (timer) {
          clearTimeout(timer);
        }
        setTimeout(fn, time);
      }
    }
    const oDebounce = debounce(onAction, 2000);
    document.addEventListener('click',oDebounce);
  </script>
</body>
複製代碼

節流：節流是規定函數在指定的時間間隔內只執行一次，通常用於scroll事件

<body>
  <button>節流函數</button>
  <script>
    function onAction() {
      console.log("節流函數");
    }

    function throttle(fn, time) {
      let canRun = true;
      return function () {
        if (canRun == false) {
          return;
        }
        canRun = false;
        setTimeout(() => {
          fn();
          canRun = true;
        }, time);
      }
    }
    const oThrottle = throttle(onAction, 2000);
    document.addEventListener('click', oThrottle);
  </script>
</body>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。