js的节流与防抖

最新推荐文章于 2024-09-21 16:58:31 发布

i_am_a_div_日积月累_

最新推荐文章于 2024-09-21 16:58:31 发布

阅读量67

点赞数

分类专栏： js 文章标签：节流和防抖

本文链接：https://blog.csdn.net/i_am_a_div/article/details/115517806

版权

js 专栏收录该内容

36 篇文章 1 订阅

订阅专栏

本文通过一个简单的HTML示例，介绍了JavaScript中的两种重要优化技术——节流和防抖。节流用于限制函数在设定时间内执行的频率，常用于下拉加载或滚动事件处理；防抖则确保在频繁触发后只执行最后一次，适用于输入验证或延迟请求。通过这两个技术，可以有效地提高页面性能和用户体验。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button class="btn1">节流</button>
    <button class="btn2">防抖</button>
    <script>
      var btn1 = document.getElementsByTagName("button")[0];
      var btn2 = document.getElementsByTagName("button")[1];

      // 1.节流:高频时间出发 但是n秒内只会执行一次 节流会稀释函数的执行频率----类似于游戏大招cd--下拉加载鼠标不断点击触发、监听滚动事件
      //   书写技巧  在调用函数的那个条件里更改true和false和定时器
      function fn1() {
        console.log("发送大招");
      }
      let flag = true;
      btn1.onclick = function () {
        if (flag) {
          fn1();
          flag = false;
          setTimeout(() => {
            flag = true;
          }, 2000);
        } else {
          console.log("大招冷却中...");
        }
      };

      //   2.防抖 高频触发后n秒内只会执行一次  再次触发重新计时-----如用户输入字母间隔超过2秒再发送请求
      function fn2() {
        console.log("触发");
      }
      var time = null;
      btn2.onclick = function () {
        clearTimeout(time);
        time = setTimeout(() => {
          fn2();
          time = null;
        }, 2000);
      };
    </script>
  </body>
</html>