JS节流防抖

最新推荐文章于 2024-09-17 13:42:29 发布

Tomcat20

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量82

点赞数

分类专栏： js 文章标签： javascript 前端

本文链接：https://blog.csdn.net/Tomcat20/article/details/127150137

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 节流：一段时间内只能执行一次

常用情景：表单重复提交；滚动加载

 <button>节流</button>

  <script>
    let btn = document.querySelector('button')
    let timer = null

    btn.onclick = () => {
      if(timer) return 
      timer = setTimeout(() => {
        console.log('2秒内只执行一次');
        timer = null
      }, 2000);
    }
  </script>

2. 防抖：多次触发一个函数时，只会执行最后一次

应用情景：手机号，邮箱等验证的输入监测；搜索框的输入，输入最后一次在发送请求

  <button>防抖</button>

  <script>
    let btn = document.querySelector('button')
    let timer = null

    btn.onclick = () => {
      clearTimeout(timer)
        timer = setTimeout(() => {
        console.log('只会执行最后一次');
      }, 2000);
    }
  </script>