JavaScript 的防抖与节流

防抖(debounce) 和 节流(throttling)

防抖

• 基本思想

  • debounce，去抖动。策略是当事件被触发时，设定一个周期延迟执行动作，若期间又被触发，则重新设定周期，直到周期结束，执行动作。

• 个人理解

  • 防抖就是相同事件短时间内多次触发，只响应处理单位时间内最后一次事件。

• 函数封装

  // 防抖 debounce 传入参数 func 要防抖的函数 wait 防抖的时间 后面的参数为要防抖的函数参数
  function debounce(func, wait) {
  	// 初始化 timer that args 变量
  	let timer, that, args
  	return function () {
  		// 保存 this arguments
  		that = this
  		args = arguments
  		// 根据定时器判断上一次操作是否完成 如果没有完成 则清空上一个定时器 重新开启一个定时器
  		timer &&  clearTimeout(timer)
  		// 重新开启一个定时器
  		timer = setTimeout(() => {
  			// 定时器完成后 调用回调函数
  			func.call(that, args)
  		}, wait)
  	}
  }
  

• 使用

  debounce(fn, 2000, '参数')
  

节流

• 基本思想

  • throttling，去节流。节流的策略是，固定周期内，只执行一次动作，若有新事件触发，不执行。周期结束后，又有事件触发，开始新的周期。
  • 个人理解
    • 节流就是相同事件频繁触发，按一定的时间频率响应处理

• 函数封装

  // 节流 throttle 传入参数 func 要节流的函数 wait 节流的时间 后面的参数为要节流的函数参数
  function throttle(func, wait) {
    // 初始化 变量
    let that, args, timer
    return function (args) {
      // 保存 this
      that = this
      // 保存 arguments
      args = arguments
      // 把 timer 定时器 当成 节流阀 
      if (!timer) {
        // 开启一个 timer 定时器 
        timer = setTimeout(() => {   
          // 定时器时间到了 触发回调函数
          func.call(that, args)  
          // 清空定时器 控制节流阀
          timer = null
          // 给定时器时间
        }, wait) 
      }
    }
  }
  

• 使用

  throttle(fn, 2000, '参数')
  

总结：

• 函数防抖与函数节流都是为了解决单位时间内，同一事件频繁触发而引起的性能损失问题。
• 通过函数防抖或者函数节流后，同一事件的响应频率得到控制。
• 函数防抖与节流能够优化页面性能。