防抖节流

最新推荐文章于 2024-06-11 10:47:26 发布

დ 北漂的小芹菜_』

最新推荐文章于 2024-06-11 10:47:26 发布

阅读量92

点赞数

分类专栏：防抖节流文章标签： html js javascript

本文链接：https://blog.csdn.net/weixin_49687247/article/details/112305334

版权

防抖节流专栏收录该内容

1 篇文章 0 订阅

订阅专栏

title: 防抖节流

防抖节流线上视频链接，B站 https://www.bilibili.com/video/BV1TE411q7m4

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  * {
    padding: 0;
    margin: 0;
  }

  body,
  html {
    width: 100%;
    height: 5000px;
  }

  #div {
    position: fixed;
    width: 500px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: red;
  }
</style>

<body>
</body>
<script>
  let div = document.querySelector("#div")

  function throttle(fn, duration = 1000) { // 节流
    let timer = 0
    return function (...args) {
      let _self = this
      if (timer) {
        return
      }
      fn.apply(_self, args)
      timer = setTimeout(() => {
        clearTimeout(timer)
        timer = 0
      }, duration)
    }
  }

  function debounce(fn, duration = 1000) { // 防抖
    let timer = 0
    return function (...arge) {
      let _self = this
      clearTimeout(timer)
      timer = setTimeout(() => {
        fn.apply(_self, arge)
      }, duration)
    }
  }

  function Div() {
    console.log(window.scrollY)
  }
  
  document.addEventListener("scroll", throttle(Div, 2000)) // 节流
  document.addEventListener("scroll", debounce(Div, 2000)) // 防抖
</script>

</html>

დ 北漂的小芹菜_』

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
防抖节流

title: 防抖节流防抖节流线上视频链接，B站 https://www.bilibili.com/video/BV1TE411q7m4<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
复制链接

扫一扫