防抖和节流

一个好好的程序员

已于 2022-05-01 16:44:25 修改

阅读量263

点赞数

文章标签： js

于 2022-04-17 22:34:08 首次发布

本文链接：https://blog.csdn.net/m0_62823653/article/details/124238324

版权

本文介绍了JavaScript中的事件防抖和节流技术，这两种技术常用于优化频繁触发的事件处理，如窗口滚动、输入框输入等场景。防抖技术确保在设定的时间间隔内，无论事件如何频繁触发，只执行最后一次操作；而节流技术则是在设定的时间间隔内，首次触发事件后，保证一定时间内只执行一次操作。示例代码分别展示了防抖和节流的实现方式。

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

一.防抖

在单位时间内，频繁触发同一个操作，只会触发最后一次

 <script>
    //在单位时间内，频繁触发同一个操作，只会触发一次
    let timID;
    document.querySelector('.button1').onclick = function () {
      //点击第一次 点击事件生效，多次点击，只有最后一次生效
      clearTimeout(timID)
      
      timID = setTimeout(function(){
        console.log('你好')
      },500)

    }
  </script>

二.节流

在单位时间内，频繁触发同一个操作，只会触发第一次

  <script>
    //在单位时间内，频繁触发同一个操作，只会触发一次
    //思路：开关思想
    let  bool = true
    document.querySelector('.button1').onclick=function(){
      if(bool==false){
        return
      }
      bool=false
      setTimeout(function(){
        console.log('发送ajax')
        bool=true
      },2000)
    }
  </script>