js 防抖

原创已于 2022-03-25 14:07:48 修改 · 731 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js防抖

于 2022-03-25 10:52:37 首次发布

js 专栏收录该内容

51 篇文章

订阅专栏

本文介绍了一种在前端开发中常用的防抖技术实现方法。通过使用防抖函数，可以有效减少由于频繁触发事件（如滚动事件）导致的性能损耗。文章提供了一个具体的示例，即在用户滚动页面停止一秒钟后才执行显示滚动条位置的操作。

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

防抖函数的定义是当事件触发完成之后再延迟触发，并且只触发一次；如果频繁滚动就会刷新定时器，这样就不会执行函数，如果停止后，一秒后才会继续执行

下边例子是滚动停止一秒后执行

ngOnInit(){
    window.onscroll = e => { this.debounce(this.showTop, 1000) }
}

showTop() {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    console.log('滚动条位置：' + scrollTop);
}

debounce(fn, delay) {
  if (this.timer) {
      clearTimeout(this.timer)
  }
  this.timer = setTimeout(fn, delay)
}