JavaScript 防抖和节流【防止重复调用，降低性能】

最新推荐文章于 2023-12-20 11:28:38 发布

DC...

最新推荐文章于 2023-12-20 11:28:38 发布

阅读量851

点赞数 1

分类专栏： javascript 文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/m0_63779088/article/details/125960334

版权

javascript 专栏收录该内容

26 篇文章

订阅专栏

本文深入探讨了JavaScript中的防抖和节流技术。防抖技术在频繁触发的事件中确保事件处理函数在特定间隔后仅执行一次，常用于输入框搜索和按钮点击。节流则限制函数在固定时间间隔内执行一次，适用于滚动事件和懒加载等场景。通过示例代码和图表，详细解析了两者的工作原理和应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

JavaScript 防抖和节流

JavaScript 防抖和节流

防抖

防抖基本概念

任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。

我们加入了防抖以后，当你在频繁的输入时，并不会发送请求，只有当你在指定间隔内没有输入时，才会执行函数。如果停止输入但是在指定间隔内又输入，会重新触发计时。

防抖前（图）

在这里插入图片描述

防抖后（图）

在这里插入图片描述

防抖代码展示

    <input type="text" name="" id="" />
    <script>
      //防抖:用户触发事件,只要最后一次事件的操作
      let inp = document.querySelector('input')
      inp.oninput = debounce (function() {
        console.log(this.value)
      },500) 
      //闭包原理
      function debounce(fn,delay) {
        let t = null //因为闭包，t不会被销毁
          return function () { //return返回值是一个内部函数
            if(t !== null) {
                clearInterval(t)
            }
            t = setTimeout(()=> {
                fn.call(this);//this通过call改变成和debounce函数一样的指向
            },delay);
      }
      }

实现原理

防抖实现原理就是利用定时器，函数第一次执行时设定一个定时器，并且通过闭包缓存起来，之后调用时发现已经设定过定时器就清空之前的定时器，并重新设定一个新的定时器，如果存在没有被清空的定时器，当定时器计时结束后触发函数执行。

防抖使用场景

频繁触发按钮点击事件、input框搜索等等。

在这里做一个形象的比喻：防抖就是法师发技能的时候要读条，技能读条没完再按技能就会重新读条。

节流

节流基本概念

规定在一个单位时间内只能触发一次函数，如果在单位时间内触发多次,只执行一次。比如两秒内的点击事件，无论点多少次，两秒内只执行一次。

节流前（图）

在这里插入图片描述

节流后（图）

在这里插入图片描述

节流代码展示

    <style>
        body {
            height: 2000px;
        }
    </style>
  </head>
  <body>
    <script>
      //节流：控制执行次数
      //控制高频事件的执行次数
      window.onscroll = throttle(function () {
        console.log('111')
      }, 500)
      //闭包原理
      function throttle(fn, delay) {
        let flag = true
        return function () {
          //return返回值是一个内部函数
          if (flag) {
            setTimeout(() => {
            fn.call(this) //this通过call改变成和debounce函数一样的指向
            flag =true
          }, delay)
          }
          flag = false
        }
      }
    </script>
  </body>