js逻辑封装_防抖

最新推荐文章于 2024-07-26 20:46:33 发布

乖女子@@@

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量112

点赞数

分类专栏： # 逻辑与踩坑文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_43260366/article/details/128164064

版权

逻辑与踩坑专栏收录该内容

12 篇文章 0 订阅

订阅专栏

防抖

定义

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

函数封装

 function utils (fn, time=500) {
   var timeId = null
   let _arg = arguments
   let _this = this
   // 使用闭包的原因，使得timeId不会被清除，也不会被重新赋值(因为闭包函数一直在使用timeId)
   return function () {
     clearTimeout(timeId)
     timeId = setTimeout(() => {
       fn.apply(_this, arguments)
      }, time)
   }
 }

举例说明-监听滚动条滚动事件

 <body>
    <div id="box">回到顶部</div>
    <script>
      function changTop (e) {
        // 1.获取屏幕的滚动距离(兼容性)
        let _scrollTop =
          window.pageYOffset ||
          document.body.scrollTop ||
          document.documentElement.scrollTop
        console.log(e)
        //2.当屏幕滚动举例大于300px时，显示box
        if (_scrollTop > 300) {
          document.querySelector('#box').style.display = 'block'
        } else {
          document.querySelector('#box').style.display = 'none'
        }
      }
      window.addEventListener('scroll', utils(changTop), false)
    </script>
  </body>