vue面试之“防抖和节流”

最新推荐文章于 2024-04-26 16:47:03 发布

空投在我怀里

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量184

点赞数

分类专栏： vue面试文章标签： vue.js 面试 javascript

本文链接：https://blog.csdn.net/wrk2466836002/article/details/124934584

版权

vue面试专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

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

<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>

开始1000毫秒之后再执行

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

例如：设定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>

空投在我怀里

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue面试之“防抖和节流”

防抖: 就是指触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。例如：设定1000毫秒执行，当你触发事件了，他会1000毫秒后执行，但是在还剩500毫秒的时候你又触发了事件，那就会重新<body> <input type="text" class="ipt" /> <script> var timerId = null document.querySelector('.ipt').on
复制链接

扫一扫