js节流和防抖的区别

在JavaScript中，节流(Throttle)和防抖(Debounce)是两种常用的技术，用于控制函数执行的频率，从而提高性能。它们的主要区别在于处理函数被调用的方式：

防抖(Debounce)

  • 目的 ：确保在一定时间内只执行最后一次事件触发。

  • 原理 ：每次事件触发时，都会取消之前的计时器并重新设置一个新的计时器。

  • 适用场景 ：如输入框内容变化、窗口大小调整等，用户可能会在短时间内多次触发事件。

节流(Throttle)

  • 目的 ：确保在一定时间内只执行一次事件触发。

  • 原理 ：每次事件触发时，如果存在等待执行的计时器，则取消之前的计时器，然后重新设置一个新的计时器。

  • 适用场景 ：如页面滚动、鼠标移动等，事件被频繁触发，但不需要连续执行。

代码示例

// 防抖函数
function debounce(func, delay) {
  let timer = null；
  return function() {
    if (timer) {
      clearTimeout(timer)；
    }
    timer = setTimeout(() => {
      func.apply(this, arguments)；
    }, delay)；
  }
}

// 节流函数
function throttle(func, limit) {
  let inThrottle；
  return function() {
    const args = arguments；
    const context = this；
    if (!inThrottle) {
      func.apply(context, args)；
      inThrottle = true；
      setTimeout(() => inThrottle = false, limit)；
    }
  }
}

总结

  • 防抖 ：关注最后一次操作，忽略中间的操作。

  • 节流 ：关注时间间隔，确保在固定时间间隔内只执行一次操作。

选择使用防抖还是节流取决于具体的应用场景和需求。希望这能帮助你理解它们之间的区别

Top
×
×