节流和防抖

防抖(Debounce)和节流(Throttle)是两种用于控制函数执行频率的技术，它们的主要区别在于处理事件的方式和目的：

防抖(Debounce)

  • 定义 ：当事件被频繁触发时，防抖会在最后一次触发后延迟一定时间(wait)再执行事件处理函数。如果在延迟时间内事件再次被触发，则重新计时。

  • 应用场景 ：适用于输入框实时搜索、窗口大小调整等场景，可以避免频繁的函数调用，减少不必要的计算和资源消耗。

  • 实现 ：

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

节流(Throttle)

  • 定义 ：节流确保在一定时间间隔(wait)内只执行一次事件处理函数，无论事件触发的频率有多高。

  • 应用场景 ：适用于滚动事件、鼠标移动等高频触发场景，可以控制函数的执行频率，避免函数被过于频繁地调用。

  • 实现 ：

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；
    }
  }；
}

总结

  • 防抖 ：确保在最后一次触发后延迟一定时间执行，适用于需要等待用户停止操作后再执行的场景。

  • 节流 ：确保在一定时间间隔内只执行一次，适用于需要控制高频率触发事件执行的场景。

希望这解答了你的问题，

Top
×
×