防抖函数和节流函数

紫微前端

于 2022-05-30 09:43:35 发布

阅读量157

点赞数

CC 4.0 BY-SA版权

分类专栏：前端知识加深文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/125040954

前端知识加深专栏收录该内容

510 篇文章 ¥39.90 ¥99.00

订阅专栏

本文探讨了JavaScript中两种重要的性能优化技术——防抖函数和节流函数。防抖函数用于限制函数的频繁调用，确保在特定时间内只执行一次；而节流函数则是在固定间隔内执行函数，避免过度密集的执行。这两种技术常用于处理如窗口resize、滚动事件等场景，以提高应用性能。

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

防抖函数

function debounce(fn, delay = 200) {
  let timer
  return function(...args) {
    if (timer) {
      clearTimeout(timer)
      timer = null
    }
    timer = setTimeout(() => {
      fn.apply(this, args)
      clearTimeout(timer)
      timer = null
    }, delay)
  }
}

节流函数

function throttle(fn, delay = 200) {
  let flag = true
  return function(...args) {
    if(!flag) {
      return
    }
    flag = false
    let timer = setTimeout(() => {
      fn.apply(this, args)
      flag = true
      clearTimeout(timer)
    }, delay)
  }
}