节流与防抖(都是简单版

人鱼之伤

于 2021-08-21 21:52:43 发布

阅读量109

点赞数

分类专栏：算法相关的知识文章标签： javascript ecmascript 前端

本文链接：https://blog.youkuaiyun.com/qq_40957332/article/details/119845608

版权

算法相关的知识专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了JavaScript中的防抖(debounce)和节流(throttle)技术，这两种技术常用于优化高频率事件的处理，以提高性能。防抖函数确保在最后一次触发后的一段时间内没有再次触发，才会执行回调。而节流函数则限制了在单位时间内函数执行的次数，确保间隔一段时间执行一次。文中提供了具体的防抖和节流函数实现示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 防抖；在一定时间内没有第二次触发某个事件，这个事件才会执行，
// 如果在一定时间内多次触发，就会从头开始计算时间，到设定的时间后再次出发
// 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

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

// 高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率
// 规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，
// 只有一次生效。
function throttle(fn, wait) {
  let canRun = true

  return function() {
    if(!canRun) return
    canRun = false
    setTimeout(() => {
      fn.apply(this, arguments)
      canRun = false
    }, wait)
  }
}