浅析JS防抖和节流

最新推荐文章于 2024-02-02 13:35:08 发布

ordnary_jv

最新推荐文章于 2024-02-02 13:35:08 发布

阅读量455

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.csdn.net/ordnary_jv/article/details/123265467

版权

JS防抖和节流

防抖：首先思考一个问题，防抖是如何产生的，抖动的现象又是什么，会造成什么样的影响，我们才能更好的理解防抖
先聊一下抖动的现象吧，假如现在有一个按钮，用户点一次，浏览器向服务器发起一次请求，返回一个值，！但是，这个用户手抖，喜欢在按钮上一直点，那么就会造成，浏览器一直向服务器发送请求，影造成服务器阻塞。这样明显不好。
所以就出现了防抖这个说法，就是为了控制用户点击时浏览器实际发送请求的次数。就是说，在1s内点击10次按钮，但这明显是用户手抖，才点了10次按钮，我们只需要发送1次请求就可以，因为这里的返回结果是一样的，假设设置时间间隔为1s，那么就是说在1s内发送10次请求，实际只发送1次请求，只有下一秒，再点击按钮，才会发送第二次请求，每次请求完毕之后都要清空定时器，才能执行下次用户点击事件。
下面用代码解释：

<body>
  <div class="bg">
    <button class="btn">剁手按钮</button>
  </div>
</body>

首先在body里面定义了一个按钮，接着为按钮添加点击事件，这里用函数返回值，来替代请求服务器的返回结果,以下是JS代码：

<script>
  //首先为button添加点击事件
  const button = document.querySelector('button')
  //定义函数ask 
  function payMoney() {
   
    console.log('已剁'); console.log(this);
  }
 /*  //定义一个防抖函数debounce，这里传入两个参数，
      func为函数内部执行的函数，delay保存setTimeout的时间间隔*/
  function debounce(func