函数防抖(封装原理)

最新推荐文章于 2024-08-25 13:14:30 发布

鑫仔不想努力

最新推荐文章于 2024-08-25 13:14:30 发布

阅读量428

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/tx99230/article/details/130268387

版权

函数防抖是一种优化技术，用于限制函数在单位时间内执行的次数，常用于搜索框输入事件、窗口滚动等场景，以减少不必要的计算和提高性能。通过设置setTimeout和clearTimeout，当事件频繁触发时，只有最后一次触发会被执行。文章提供了函数防抖的实现示例和封装方法。

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

什么是函数防抖？

概念：单位时间内,频繁触发事件，只会触发最后一次

运用场景：搜索框

我们为什么需要函数防抖?

在我们前端开发中有一些事件，onresize,scroll.mousemove等，他们会频繁的触发(短时间内触发很多次)，如果我们不将他们限制住，他们会在1秒内触发几十次，几百次，这样是很消耗我们计算机资源，还会造成程序的卡顿甚至卡死

函数防抖如何解决上面的问题？

防抖函数的要点是需要一个setTimeout(定时器)来辅助实现的。如果我们所添加的事件多次触发，那么我们就把上次记录的延时执行代码用clearTimeout给清除掉，然后重新计时，如果上次的延时代码只是触发了一次后续没有在继续触发事件，那么就等我们设置的延时时间过去之后就成功执行该目标代码

上图

<body>
   <input type="text" placeholder="请输入文本">

   <script>
  /* 
        1.函数防抖 :  单位时间内,频繁触发时间，只会触发最后一次
        2.经典应用场景 ：输入框搜索
        3.函数防抖流程 ：
            3.1 声明全局变量存储定时器ID
            3.2 每一次触发事件, 先清除上一次定时器。 然后将事件处理代码放入本次定时器中
  */

        let input = document.querySelector('input')

        // (1) 全局变量存储定时器
        let timeID

        input.addEventListener('input',function(){
          // (2) 清除上一次定时器
          clearTimeout(timeID)
          // (3)开启本次定时器
          timeID = setTimeout(function(){
            // 事件处理：假如这里有大量的代码，例如大量DOM操作，就会导致卡顿
            console.log( input.value )
          } , 500)
          
        })
</script>
</body>

函数防抖封装原理

全过程封装防抖函数及原理

<body>
  <input type="text" placeholder="请输入文本">

  <script> 
   const input = document.querySelector('input')
   
    // 封装万能防抖函数
    // 第一个参数： 事件处理函数(回调函数)
    // 第二个参数:  防抖间隔
    // 返回值 : 做了防抖处理的新函数
    /*  函数防抖流程 ：
            (1)声明全局变量存储定时器ID
            (2)每一次触发事件, 先清除上一次定时器。 然后将事件处理代码放入本次定时器中*/
   function debounce (callback,item){
    // (1)声明一个定时器ID
    /* 这个timeID要放在 返回的那个函数外面声明。
      因为你一旦写到了下面function的里面去了，那么你每调用一次函数，就会重新声明一个全新的变量 
      timeID. 如果放到外面的话,  下面这个函数全部访问的就是同一个timeID。 这样才能做到每一次 
      清除定时器的时候，都是把之前的定时器给清除。
      */
    let timeID

    return function () {     
    // (2)清除上一次的定时器
         clearTimeout(timeID)
    // (3)开启本次的定时器  setTimeout( 函数 , 间隔 )
         timeID = setTimeout(callback,item)
     }
   }

    // 使用封装的防抖函数
    input.addEventListener('input',debounce(function () {
         console.log(input.value)
      },1000))
    /* 解析:callback 就是debounce(function () {
          console.log(input.value)
       }，上面的开启定时器是我简写，如果看不懂简写可以将本行代码复制上去替换掉callback
       1000毫秒就是item
        */
  </script>
</body>

祝各位彦祖学的开心，学的快乐！