防抖和节流

防抖(Debounce)和节流(Throttle)是两种常用的前端性能优化技术，主要用于控制某个函数在一定时间内触发的次数，以减少触发频率，提高性能并避免资源浪费。

防抖(Debounce)

定义 ：

防抖是指在事件被触发后，延迟一定时间(n秒)再执行事件处理函数。如果在延迟时间内该事件再次被触发，则重新计时，直到延迟时间结束后才会执行最后一次触发的函数。

应用场景 ：

  • 模糊搜索

  • 短信验证

  • 文本编辑器的实时保存

  • 输入框的实时搜索

实现 ：

function debounce(func, delay) {
  let timerId = null；
  return function() {
    let context = this；
    let args = arguments；
    clearTimeout(timerId)；
    timerId = setTimeout(function() {
      func.apply(context, args)；
    }, delay)；
  }；
}

节流(Throttle)

定义 ：

节流是指在持续性触发事件时，确保一定时间段内只调用一次事件处理函数。如果在设定的时间间隔内事件再次被触发，则不会执行新的函数调用，直到下一个时间间隔结束后才会执行。

应用场景 ：

  • 滚动事件

  • 浏览器播放事件

  • 窗口的resize事件

实现 ：

function throttle(func, wait) {
  let previous = 0；
  return function() {
    let context = this；
    let args = arguments；
    let now = Date.now()；
    if (now - previous > wait) {
      func.apply(context, args)；
      previous = now；
    }
  }；
}

总结

  • 防抖 ：适用于需要等待用户停止操作后再执行的场景，例如输入框的实时搜索。

  • 节流 ：适用于需要控制函数执行频率的场景，例如滚动事件或窗口resize事件。

这两种技术都可以有效减少因频繁触发事件而导致的性能问题，提高应用的响应速度和用户体验。在实际开发中，可以根据具体需求选择合适的技术。

Top
×
×