函数节流与函数防抖的区别

àì夳堔傛蜴生んèń 2024-04-18 10:08 78阅读 0赞

函数节流与函数防抖是我们解决频繁触发DOM事件的两种常用解决方案，但是经常傻傻分不清楚。。。这不，在项目中又用遇到了，在此处记录一下

## 函数防抖 debounce ##

**原理**：将若干函数调用合成为一次，并在给定时间过去之后，或者连续事件完全触发完成之后，调用一次(**仅仅只会调用一次！！！！！！！！！！**)。

**举个栗子**：滚动scroll事件，不停滑动滚轮会连续触发多次滚动事件，从而调用绑定的回调函数，我们希望当我们停止滚动的时，才触发一次回调，这时可以使用函数防抖

原理性代码及测试

此处的触发时间间隔设置的很小，如果匀速不间断的滚动，不断触发scroll事件，如果不用debounce处理，可以发现num改变了很多次，用了debounce函数防抖，num在一次上时间的滚动中只改变了一次。

补充：浏览器在处理setTimeout和setInterval时，有最小时间间隔。  
setTimeout的最短时间间隔是4毫秒；  
setInterval的最短间隔时间是10毫秒，也就是说，小于10毫秒的时间间隔会被调整到10毫秒。  
事实上，未优化时，scroll事件频繁触发的时间间隔也是这个最小时间间隔。  
也就是说，当我们在debounce函数中的间隔事件设置不恰当（小于这个最小时间间隔），会使debounce无效。

## 函数节流 throttle ##

**原理**：当达到了一定的时间间隔就会执行一次；可以理解为是缩减执行频率

**举个栗子**：还是以scroll滚动事件来说吧，滚动事件是及其消耗浏览器性能的，不停触发。以我在项目中碰到的问题，移动端通过scroll实现分页，不断滚动，我们不希望不断发送请求，只有当达到某个条件，比如，距离手机窗口底部150px才发送一个请求，接下来就是展示新页面的请求，不停滚动，如此反复；这个时候就得用到函数节流

原理性代码及实现

const throttle = function(fn,delay) {
      let timer = null
      return function() {
         const context = this
         let args = arguments
         if(!timer) {
          timer = setTimeout(() => {
            fn.apply(context,args) 
            clearTimeout(timer) 
          },delay)
        }
      }
    }

需要注意的是定时器方法实现throttle方法和debounce方法的不同

**在debounce中：在执行setTimeout函数之前总会将timer用setTimeout清除，取消延迟代码块，确保只执行一次  
在throttle中：只要timer存在就会执行setTimeout，在setTimeout内部每次清空这个timer，但是延迟代码块已经执行啦，确保一定频率执行一次**