阅读 97

js函数防抖,节流

防抖:防抖是任务频繁触发的情况下,只有任务触发的间隔超过指定间隔的时候,任务才会执行,一般用于输入框实时搜索,类似上电梯,进电梯后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>
复制代码
文章分类
前端
文章标签