• 欢迎大家分享资料!前往留言板评论即可!

对js防抖的理解

合宙 模组资料网 2年前 (2021-05-15) 328次浏览 0个评论 扫描二维码

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

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

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

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

函数防抖(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));
  }

执行结果
对js防抖的理解
当且仅当滚动条移动停留1秒后,才执行handleScroll这个函数,实现了性能优化。


转载请注明原文链接:对js防抖的理解
喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址