简单的防抖和节流

最新推荐文章于 2024-11-08 14:35:14 发布

aoao72

最新推荐文章于 2024-11-08 14:35:14 发布

阅读量116

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_59011179/article/details/129278569

版权

该文章通过示例展示了JavaScript中两种优化事件处理函数的方法：防抖(debounce)用于合并多次操作，确保在特定时间间隔后只执行一次；节流(throttle)则限制函数在给定时间内最多执行一次，确保执行频率不会过高。

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="btn1">按钮1：函数防抖-将几次操作合并为一此操作进行</button>
  <div style="height: 50px;"></div>
  <button id="btn2">按钮2：函数节流-使得一定时间内只触发一次函数</button>

  <script>
    //防抖
    let button1 = document.getElementById("btn1");
    let timer1;
    button1.onclick = function () {
      if (timer1) {
        clearTimeout(timer1)
      }
      timer1 = setTimeout(() => {
        console.log("点击了按钮1")
        timer1 = null
      }, 1000);
    }

    //节流
    let button2 = document.getElementById("btn2");
    let timer2;
    button2.onclick = function () {
      if (timer2) return
      timer2 = setTimeout(() => {
        console.log("点击了按钮2")
        timer2 = null
      }, 2000);
    }


  </script>
</body>

</html>