防抖与节流的原理

盛夏的记忆

于 2022-11-15 17:25:58 发布

阅读量131

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_66285809/article/details/127869643

版权

防抖：短时间内触发了多个setTimeout只会执行最后一个
节流：短时间内触发多个setTimeout，只会执行第一个，当第一个执行完后，才可以继续触发后面的setTimeout

防抖和节流的原理都使用到了闭包的概念：闭包的好处是里面的变量只会在闭包中使用，也就是外部的函数是不能使用这个变量的，也就不会修改这个变量，就不会受到外部的污染；

防抖原理解析：再执行setTimeout之前，先使用clearTimeout()把上一次定时器给清除掉，这样就达到了只会执行最后一次触发的setTimeout

代码解析

<body>
  <input id="int" type="text">
</body>
<script>
  const int = document.getElementById("int")

  // 调接口的函数
  const getData = function () {
    console.log("调接口了");
  }

  int.addEventListener('input', double(getData, 1000))

  // 封装防抖函数
  function double(fn, time) {
    let timeout
    return () => {
      // 先清除掉上一次的计时器
      clearTimeout(timeout)
      timeout = setTimeout(() => {
        fn()
      }, time)
    }
  }
</script>

节流原理解析：节流的原理解析：在第一次触发了setTimeout后，先把阀门关闭（使用一个Boolean变量），等执行完后再把阀门打开，这样后面的setTimeou在触发前会先判断阀门是否关闭，如果关闭了则不会继续触发，要等之前的setTimout执行完后，才允许触发后面的setTimeout，简单地理解就是：一群人排队体检，第一个人进去一个房间体检，要把门关上，要等这个人体检完，再把门打开，下一个才可以进去

代码如下：

<body>
  <input id="int" type="text">
</body>
<script>
  const int = document.getElementById("int")

  // 调接口的函数
  const getData = function () {
    console.log("调接口了");
  }

  int.addEventListener('input', double(getData, 1000))

  // 封装节流函数
  function double(fn, time) {
    let isLoad = false
    return () => {
      if (!isLoad) {
        // 设置为true后，即禁止下一个计时器执行
        isLoad = true
        setTimeout(() => {
          fn()
          // 等这个计时器执行完毕后，再设置为false，才允许下一个计时器执行
          isLoad = false
        }, time)
      }
    }
  }
</script>

盛夏的记忆

关注

0
点赞
踩
0

收藏

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

节流原理解析：节流的原理解析：在第一次触发了setTimeout后，先把阀门关闭（使用一个Boolean变量），等执行完后再把阀门打开，这样后面的setTimeou在触发前会先判断阀门是否关闭，如果关闭了则不会继续触发，要等之前的setTimout执行完后，才允许触发后面的setTimeout，简单地理解就是：一群人排队体检，第一个人进去一个房间体检，要把门关上，要等这个人体检完，再把门打开，下一个才可以进去。把上一次定时器给清除掉，这样就达到了只会执行最后一次触发的setTimeout。
复制链接

扫一扫