Javascript---BOM 防抖节流

我会带着你远行 2024-04-08 12:37 80阅读 0赞

## 函数防抖 ##

单位时间内，多次触发一个事件，以最后一次触发为准。

防抖实现：

1.声明一个全部变量存储定时器ID。

2.每一次触发交互的时候，先清除上一次的定时器，然后开启本次定时器。

<!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>
      <input type="text" name="" id="inp">
      <script>
        // 防抖
        var inp = document.getElementById('inp')
       //声明一个全局变量存储定时器
        var timeID = null
        inp.oninput = function () {
    //1清除之前的定时器
          clearTimeout(timeID)
    //2开启本次定时器
          timeID = setTimeout(() => {
            console.log(`你输入的值是${this.value}`);
          }, 1000);
        }
    
      </script>
    </body>
    </html>

多次输入1 只输出最后一次的结果

![acfeb92fc8064cea8e296aa5de60968d.png][]

## 函数节流 ##

单位时间内，多次触发一个事件，只触发一次。

节流的实现：

1.声明一个全局变量，存储触发事件。

2.每一次出发事件，获取当前时间。

3.判断当前时间与上一次触发事件，是否超过间隔。

4.如果超过间隔时间，则执行事件处理代码，然后存储本次触发的时间。

<!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 onclick="btnClick()">点我呀</button>
      <script>
       
    
     //声明一个全局变量存储触发事件
        var lastTime = null
        function btnClick() 
    {
    //1.每一次触发 先获取本次的时间戳
          var currentTime = Date.now()
    //2.判断当前时间与上一次触发时间是否超过间隔
          if (currentTime - lastTime >= 3000) {
            console.log('按钮被点击了');
    //3.存储本次的触发时间
            lastTime = currentTime
          }
        }
      </script>
    </body>
    </html>

无论点多少次 最终只触发一次。

![03e25a4bb06643d0bfa5812af3bfef42.png][]

[acfeb92fc8064cea8e296aa5de60968d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/3dc2d71056da4c9bba079848e4fbfe17.png
[03e25a4bb06643d0bfa5812af3bfef42.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/1a65cf3497b04b1e8fde491f239f1995.png