怎么理解函数的防抖和节流_函数防抖timer怎么理解

作者：小小林熬夜学编程 | 2024-03-30 09:04:07

踩

函数防抖timer怎么理解

防抖: 就是指触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。

例如：设定1000毫秒执行，当你触发事件了，他会1000毫秒后执行，但是在还剩500毫秒的时候你又触发了事件，那就会重新开始1000毫秒之后再执行

<body>
    <input type="text" class="ipt" />
    <script>
      var timerId = null
      document.querySelector('.ipt').onkeyup = function () {
        // 防抖
        if (timerId !== null) {
          clearTimeout(timerId)
        }
        timerId = setTimeout(() => {
          console.log('我是防抖')
        }, 1000)
      }
	</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

节流: 就是指连续触发事件但是在设定的一段时间内中只执行一次函数。

例如：设定1000毫秒执行，那你在1000毫秒触发在多次，也只在1000毫秒后执行一次

<body>
    <input type="text" class="ipt" />
    <script>
		document.querySelector('.ipt').onkeyup = function () {
        // 节流
        console.log(2)
        if (timerId !== null) {
          return
        }
        timerId = setTimeout(() => {
          console.log('我是节流')
          timerId = null
        }, 1000)
      }
      </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/339932