对js防抖的理解 [ Luat doc 社区文章静态页面 ]

在前端开发过程中，有一些事件，常见的例如，onresize，scroll，mousemove等，容易频繁触发（短时间内多次触发），不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函数，尤其是执行了操作 DOM 的函数（浏览器操作 DOM 是很耗费性能的），那不仅会浪费计算机资源，还会降低程序运行速度，甚至造成浏览器卡死、崩溃。

componentDidMount() {
   window.addEventListener('scroll', this.handleScroll);
 }

 handleScroll = () => {
   let scrollY = window.scrollY; //滚动条滚动高度
   console.log("滚动条高度：",scrollY)
 };

这是一个监听滚动条高度的函数，如图所示，在如果不做处理，鼠标拖动一下就可以运行好多次函数，通常情况下，我们并不需要这么多数据，而是只需要最后一次打印，那么函数防抖就能派上用场了。
undefined

函数防抖（debounce）：就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。
防抖代码：（利用闭包实现）

debounce = (fn, delay) => {
    let timer = null;
    return function () {
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(fn, delay);
    };
  };

componentDidMount() {
    window.addEventListener('scroll', this.debounce(this.handleScroll, 1000));
  }

执行结果：
undefined
当且仅当滚动条移动停留1秒后，才执行handleScroll这个函数，实现了性能优化。