JavaScript 节流和防抖

向右看齐 2022-11-17 14:59 226阅读 0赞

### JavaScript 节流和防抖 ###

*  JavaScript 节流和防抖
 *   *  节流
     *   *  1. 简单的节流函数
     *  防抖
     *   *  1. 简单的防抖函数
         *  2. 带有立即执行选项的防抖函数 (版本1)
         *  3. 带有立即执行选项的防抖函数 (版本2)
     *  节流和防抖的结合
     *   *  1. 用 Throttle 来优化 Debounce
     *  记录

# JavaScript 节流和防抖 #

参考文章：

1.  [https://www.muyiy.cn/][https_www.muyiy.cn]
2.  [https://www.yuchengkai.cn/docs/frontend/\#%E9%98%B2%E6%8A%96][https_www.yuchengkai.cn_docs_frontend_E9_98_B2_E6_8A_96]

频繁触发的回调可能会导致大量的计算而引发页面的抖动甚至是卡顿。  
这个时候就需要进行 **事件节流（throttle）** 和 **事件防抖（debounce）** 的处理

> 相同点：
> 
> 节流和防抖本质上都是以闭包的形式存在。它们通过对事件对应的回调函数进行包裹、以自由变量的形式缓存时间信息，最后用setTimeout 来控制事件的触发频率。

> 不同点：  
> 节流是将多次执行变成每隔一段时间执行，防抖动是将多次执行变为最后一次执行。  
> 简而言之，节流是第一个人说了算，防抖是最后一个人说了算。

## 节流 ##

### 1. 简单的节流函数 ###

// fn是我们需要包装的事件回调, interval是时间间隔的阈值
    function throttle(fn, interval) { 
      // last为上一次触发回调的时间
      let last = 0
    
      // 将throttle处理结果当作函数返回
      return function () { 
          // 保留调用时的this上下文
          let context = this
          // 保留调用时传入的参数
          let args = arguments
          // 记录本次触发回调的时间
          let now = +new Date()
    
          // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
          if (now - last >= interval) { 
          // 如果时间间隔大于我们设定的时间间隔阈值，则执行回调
              last = now;
              fn.apply(context, args);
          }
        }
    }
    
    // 用throttle来包装scroll的回调
    const better_scroll = throttle(() => console.log('触发了滚动事件'), 1000)
    
    document.addEventListener('scroll', better_scroll)

## 防抖 ##

### 1. 简单的防抖函数 ###

// fn是我们需要包装的事件回调, delay是每次推迟执行的等待时间
    function debounce(fn, delay) { 
      // 定时器
      let timer = null
    
      // 将debounce处理结果当作函数返回
      return function () { 
        // 保留调用时的this上下文
        let context = this
        // 保留调用时传入的参数
        let args = arguments
    
        // 每次事件被触发时，都去清除之前的旧定时器
        if(timer) { 
            clearTimeout(timer)
        }
        // 设立新定时器
        timer = setTimeout(function () { 
          fn.apply(context, args)
        }, delay)
      }
    }
    
    // 用debounce来包装scroll的回调
    const better_scroll = debounce(() => console.log('触发了滚动事件'), 1000)
    
    document.addEventListener('scroll', better_scroll)

### 2. 带有立即执行选项的防抖函数 (版本1) ###

/** * 防抖函数，返回函数连续调用时，空闲时间必须大于或等于 wait，func 才会执行 * * @param {function} func 回调函数 * @param {number} wait 表示时间窗口的间隔 * @param {boolean} immediate 设置为ture时，是否立即调用函数 * @return {function} 返回客户调用函数 */
    function debounce (func, wait = 50, immediate = true) { 
      let timer, context, args
    
      // 延迟执行函数
      const later = () => setTimeout(() => { 
        // 延迟函数执行完毕，清空缓存的定时器序号
        timer = null
        // 延迟执行的情况下，函数会在延迟函数中执行
        // 使用到之前缓存的参数和上下文
        if (!immediate) { 
          func.apply(context, args)
          context = args = null
        }
      }, wait)
    
      // 这里返回的函数是每次实际调用的函数
      return function(...params) { 
        // 如果没有创建延迟执行函数（later），就创建一个
        if (!timer) { 
          timer = later()
          // 如果是立即执行，调用函数
          // 否则缓存参数和调用上下文
          if (immediate) { 
            func.apply(this, params)
          } else { 
            context = this
            args = params
          }
        // 如果已有延迟执行函数（later），调用的时候清除原来的并重新设定一个
        // 这样做延迟函数会重新计时
        } else { 
          clearTimeout(timer)
          timer = later()
        }
      }
    }

### 3. 带有立即执行选项的防抖函数 (版本2) ###

// 实现 2
    // immediate 表示第一次是否立即执行
    function debounce(fn, wait = 50, immediate) { 
        let timer = null
        return function(...args) { 
            if (timer) clearTimeout(timer)
          
          	// ------ 新增部分 start ------ 
          	// immediate 为 true 表示第一次触发后执行
          	// timer 为空表示首次触发
            if (immediate && !timer) { 
                fn.apply(this, args)
            }
          	// ------ 新增部分 end ------ 
          	
            timer = setTimeout(() => { 
                fn.apply(this, args)
            }, wait)
        }
    }
    
    // DEMO
    // 执行 debounce 函数返回新函数
    const betterFn = debounce(() => console.log('fn 防抖执行了'), 1000, true)
    // 第一次触发 scroll 执行一次 fn，后续只有在停止滑动 1 秒后才执行函数 fn
    document.addEventListener('scroll', betterFn)

## 节流和防抖的结合 ##

### 1. 用 Throttle 来优化 Debounce ###

> 用 Throttle 来优化 Debounce debounce 的问题在于它“太有耐心了”。试想，如果用户的操作十分频繁——他每次都不等  
> debounce 设置的 delay 时间结束就进行下一次操作，于是每次 debounce  
> 都为该用户重新生成定时器，回调函数被延迟了不计其数次。频繁的延迟会导致用户迟迟得不到响应，用户同样会产生“这个页面卡死了”的观感。
> 
> 为了避免弄巧成拙，我们需要借力 throttle 的思想，打造一个“有底线”的 debounce——等你可以，但我有我的原则：delay  
> 时间内，我可以为你重新生成定时器；但只要delay的时间到了，我必须要给用户一个响应。这个 throttle 与 debounce  
> “合体”思路，已经被很多成熟的前端库应用到了它们的加强版 throttle 函数的实现中：

// fn是我们需要包装的事件回调, delay是时间间隔的阈值
    function throttle(fn, delay) { 
      // last为上一次触发回调的时间, timer是定时器
      let last = 0, timer = null
      // 将throttle处理结果当作函数返回
    
      return function () {  
        // 保留调用时的this上下文
        let context = this
        // 保留调用时传入的参数
        let args = arguments
        // 记录本次触发回调的时间
        let now = +new Date()
    
        // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
        if (now - last < delay) { 
        // 如果时间间隔小于我们设定的时间间隔阈值，则为本次触发操作设立一个新的定时器
           clearTimeout(timer)
           timer = setTimeout(function () { 
              last = now
              fn.apply(context, args)
            }, delay)
        } else { 
            // 如果时间间隔超出了我们设定的时间间隔阈值，那就不等了，无论如何要反馈给用户一次响应
            last = now
            fn.apply(context, args)
        }
      }
    }
    
    // 用新的throttle包装scroll的回调
    const better_scroll = throttle(() => console.log('触发了滚动事件'), 1000)
    
    document.addEventListener('scroll', better_scroll)

## 记录 ##

1.  在带有立即执行选项的防抖函数 (版本1)中，要注意在later()函数的定义中，setTimeout()函数不能用\{\}包括起来，否则无法达到防抖的效果。即下面的写法是错误的。具体的原因不知道，有知道的大佬可以分享

// 延迟执行函数
        const later = () => { 
            setTimeout(() => { 
                // 延迟函数执行完毕，清空缓存的定时器序号
                timer = null
                // 延迟执行的情况下，函数会在延迟函数中执行
                // 使用到之前缓存的参数和上下文
                if (!immediate) { 
                    func.apply(context, args)
                    context = args = null
                }
            }, wait)
        }

[https_www.muyiy.cn]: https://www.muyiy.cn/
[https_www.yuchengkai.cn_docs_frontend_E9_98_B2_E6_8A_96]: https://www.yuchengkai.cn/docs/frontend/#%E9%98%B2%E6%8A%96