节流和防抖的说明和实现

218 阅读2分钟

这是我参与8月更文挑战的第10天,活动详情查看:8月更文挑战

前言

提前说明哦,这是一篇基础类的文章,比较适合小小白阅读,因为文章内容来源于我刚入行时的笔记。各位高人请绕道,谢谢~

另外,关于节流和防抖,我的另一篇文章【《看完就懂系列》天哪!搞懂节流与防抖竟简单如斯~】写的更明了一些,两篇文章可以互相补充来看。

说明

在各个平台搜索“节流和防抖”,各种教程已经说的很多了,但是我之前刚接触节流和防抖的时候,还是很不理解,因为有的教程是互相引用直接复制粘贴的,看完不仅不知所以然,而且更迷茫了。

其实理解之后,我们会发现节流和防抖的概念和用法是很简单的。为了避免新手小白继续踩坑,我来一个浅显的说明和简单的实现。

节流:

(暂时自定义时间为3s) 第一次点击立刻触发事件,此后点击时间与上次触发事件的时间大于3s才会触发

就像纸条经过打孔机,虽然纸条一直在向前滚动(相当于一直在点击),但是打孔机是每隔3s打一个孔(相当于每3秒触发一次事件)

防抖:

(暂时自定义时间为500ms) 点击后不触发事件,等待500ms后触发,在这500ms内,如果有新的点击,则清除原先的已等待时间,从新等待500ms

就像消消乐游戏(开始就相当于点击了一次),5秒钟内不能成功进行一次消除(等待5s后触发),游戏结束(触发事件) 5秒内有成功的消除(相当于新的点击),则从成功消除的时间起再等待5s结束(相当于清除原先的等待时间,从新等待5s)

实现

怎么实现功能呢? 把点击事件和请求事件分离开 点击之后根据条件触发请求

节流:

点击后进行判断当前时间戳与初始时间戳是否大于3s 大于3s就进行请求,并且将初始时间戳改为当前时间戳 小于3s就不请求

防抖:

点击后500ms不做请求操作 500ms内如果没有点击就进行请求 如果有点击就不请求.

完整的demo

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
    }

    button {
      width: 150px;
      height: 30px;
      background-color: rgb(255, 187, 187);
      border-radius: 10px;
      display: block;
      margin: 20px auto;
    }
  </style>
</head>

<body>
  <button onclick="throttle(3000)">节流</button>
  <button onclick="debounce(500)">防抖</button>
  <script type="text/javascript">
    // 节流初始时间戳
    let pastDate = new Date().valueOf()
    // 点击节流按钮触发函数
    function throttle(time) {
      console.log('点击节流按钮啦')
      let nowDate = new Date().valueOf()
      if (nowDate - pastDate > time) {
        console.log('节流情况下发送请求啦')
        pastDate = new Date().valueOf()
      }
    }
    // 防抖初始变量
    let debouncTtimeout
    // 点击防抖按钮触发函数
    function debounce(time) {
      console.log("点击防抖按钮啦")
      clearTimeout(timeout)
      debouncTtimeout = setTimeout(function () {
        console.log("执行防抖操作")
      }, time)
    }
  </script>
</body>

</html>

后记

你好哇,我是南极大冰块,一个技术与颜值成正比的前端工程师,崇尚一针见血的搞定前端问题,希望我的博客有帮助到了你。

关注我,前端路途一起走。嘿哈~😛