js 防抖和节流方法

Sam young

已于 2022-10-24 14:59:08 修改

阅读量412

点赞数

分类专栏：功能文章标签： 1024程序员节

于 2021-04-07 09:42:02 首次发布

本文链接：https://blog.csdn.net/young_sam/article/details/115478358

版权

功能专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文深入探讨了JavaScript中的两种性能优化技术——防抖(debounce)和节流(throttle)。通过示例代码展示了如何实现这两个方法，帮助开发者理解它们的逻辑原理。防抖确保在特定时间间隔内只执行一次函数，而节流则限制函数在一定时间内执行的频率，从而降低高频率事件对性能的影响。

摘要由CSDN通过智能技术生成


// let runFlag = false;

const App = {
  runFlag: false,
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  handle: setTimeout(() => { }, 0),

  /** 节流方法 */
  throttle (fn: Function, wait: number) {
    // 判断之前的调用是否完成
    if (App.runFlag) {
      return false
    }
    App.runFlag = true
    setTimeout(() => {
      fn()
      App.runFlag = false
    }, wait)
  },
  /** 防抖方法 更为严格 */
  debounce (fn: any, wait: number) {
    // 取消之前的延时调用
    if (App.handle) {
      clearTimeout(App.handle)
    }

    App.handle = setTimeout(() => {
      fn()
    }, wait)
  }
}

export default App