JS中的函数节流和防抖

最新推荐文章于 2024-09-16 08:47:17 发布

cjf菇凉

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量106

点赞数 1

分类专栏：性能优化文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44971083/article/details/110871810

版权

性能优化专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文深入探讨了函数节流和防抖在JavaScript中的应用，这两种技术用于优化性能，避免频繁调用函数导致的资源浪费。函数节流确保在固定时间间隔执行，适合页面滚动加载等场景；而函数防抖则保证在停止触发后执行最后一次，适用于搜索联想等。通过代码示例，展示了如何实现这两个功能。

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

含义和使用场景

函数节流，是控制在固定的时间间隔，比如每隔1s，调用一下函数。它的使用场景是：例如，在页面滚动下拉加载内容时（此时调用了接口或者引用了大一些的代码块），如果不加以控制，就会频繁执行一些操作，而这些不仅会浪费资源也会对浏览器增添额外的负担。

函数防抖，是在一定时间内不触发此函数的时候，此时会执行一次此方法。它的使用场景是：例如，在搜索框中输入内容，下方出现联想搜索词条时，同样的，如果不进行处理，也会频繁的执行操作，至于缺点，就不赘述了。

引用看过的文章中的一句话，就是：节流就是把多次执行改为每隔一定时间执行一次，防抖就是把多次执行改为最后执行一次。

代码实现

函数节流

function throttle(fn,delayTime){
   let time = 0
   return function(){
      let currentTime = +new Date()
      if(currentTime-time > delayTime){
         fn.call(this)
         time = currentTime
      }
   }
}

函数防抖

 function debounce(fn,delayTime){
    let setId = null
    return function(){
         if(setId != null){
            clearTimeout(setId)
          }       
         setId = setTimeout(fn,deplayTime)
        }
    }
 }