防抖与节流

最新推荐文章于 2024-01-17 19:06:42 发布

神龙大熊

最新推荐文章于 2024-01-17 19:06:42 发布

阅读量91

点赞数 1

分类专栏： JS 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_45925567/article/details/127792262

版权

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

防抖

概述：在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时。

      // 防抖
      const debounce = (fn, delay, ...args) => {
        let timeout;
        return function () {
          if (timeout) clearTimeout(timeout);
          timeout = setTimeout(() => {
            fn(args);
          }, delay);
        };
      };

应用：搜索框，窗口大小变化监测、滑动事件等

节流

概述：单位时间内有事件被多次触发则只生效一次。即在规定的时间内，函数只能被调用一次，且是最先被触发调用的那次。

      // 节流
      const throttle = (fn, delay, ...args) => {
        let lastTime = 0;
        return function () {
          let nowTime = Date.now();
          if (nowTime - lastTime > delay) {
            fn(args);
            lastTime = nowTime;
          }
        };
      };

应用：高频点击、表单重复提交、滚动加载等。

总结

完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>防抖与节流</title>
  </head>
  <body>
    <button id="content">点击触发</button>

    <script>
      // 防抖
      const debounce = (fn, delay, ...args) => {
        let timeout;
        return function () {
          if (timeout) clearTimeout(timeout);
          timeout = setTimeout(() => {
            fn(args);
          }, delay);
        };
      };

      // 节流
      const throttle = (fn, delay, ...args) => {
        let lastTime = 0;
        return function () {
          let nowTime = Date.now();
          if (nowTime - lastTime > delay) {
            fn(args);
            lastTime = nowTime;
          }
        };
      };

      // 测试代码
      function testFunction(...args) {
        console.log("args:", args);
        console.log("防抖完成");
      }
      window.onload = function () {
        var myDebounce = document.getElementById("content");
        myDebounce.addEventListener(
          "click",
          throttle(testFunction, 1000, "hello")
          // debounce(testFunction, 300, "hello")
        );
      };
    </script>
  </body>
</html>