节流的详细解读（一行一行分析代码带你深入了解节流）

渊兮兮

已于 2024-08-09 17:43:03 修改

阅读量410

点赞数 6

文章标签： html javascript

于 2024-08-08 16:01:56 首次发布

本文链接：https://blog.csdn.net/m0_61644311/article/details/140997440

版权

前端工具代码详解（有防抖、节流等等常用工具解读）

第二章节流的详细解读（一行一行分析代码带你深入了解节流）

文章目录

前端工具代码详解（有防抖、节流等等常用工具解读）
一、什么是节流？
二、节流和防抖的区别
二、功能实现
总结

一、什么是节流？

还是老样子，我们先了解什么是节流。举个栗子！比如有一个按钮你点击一下可以获取10块钱！那你是不是会一直点击他！但是你点击的太快啦！银行反应不过来！因此这个按钮被设定为，在每一次点击后的1s内，你再去点击它，它不会给你十块钱了！但是如果你在1.000…1秒点击它，它就会给你10块钱！这就是节流 有些小伙伴就疑惑啦！这和防抖有啥区别，不都是点击一下后，等一段时间再点击才可以嘛！接下来我就和大家详细说一下节流和防抖的区别！

二、节流和防抖的区别

节流：就是你设定一个程序，它每过3秒会打印一个十块钱 那么你在六秒内一直去触发它，它只会打印两次，而不是一直打印，这就是节流
防抖：就是你设定一个程序，它每过3秒会打印一个十块钱 那么你在六秒内一直去触发它，你每一次触发这个程序，它就会重新计算这3秒，如果你在六秒内一直触发它，那么在第6秒不触发后，它开始计时，在第9秒后，会打印这个十块钱
总而言之，节流就相当于你规定了它多久触发一次，他就是按照你那个规定的时间去触发那个函数。防抖就是你每一次触发它它就把上一次的清除了，等你不再触发它的一段时间后，它再执行

二、功能实现

1.创建基础HTML框架

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>防抖(debounce)</title>
    <style>
      #container {
        width: 100%;
        height: 200px;
        line-height: 200px;
        text-align: center;
        color: #fff;
        font-weight: bold;
        font-size: larger;
        background-color: #000;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

2.创建节流函数

代码如下：

    <script type="text/javascript">
      let count = 1
      let container = document.getElementById('container')
      function moveMouse() {
        container.innerHTML = count++
      }
      // 节流
      function throttle(func, wait) {
        var timeout
        return function () {
          if (!timeout) {
            timeout = setTimeout(() => {
              timeout = null
              func()
            }, wait)
          }
        }
      }
      // 绑定节流函数给鼠标移动事件
      container.onmousemove = throttle(moveMouse, 2000)
    </script>

3.解析函数运行状态

// 1.鼠标移动，触发函数 throttle
throttle()
// 1.1 throttle内部创建了一个 timeout的定时器，
// 2. 鼠标再次移动，触发throttle()函数
// 2.2 此时由于在第一次创建了一个timeout，这个时候timeout有值
// 因此里面的函数不会再被创建，在第一个定时器执行完成前，都不会在创建第二个定时器
// 当第一个定时器结束后，你如果任然在移动鼠标，它就会再创建一个定时器，把这个定时器赋值给timeout。
// 因此它就会和机器一样，你只要一直在移动鼠标，他就会在规定的事件一次一次执行

4.全部代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>防抖(debounce)</title>
    <style>
      #container {
        width: 100%;
        height: 200px;
        line-height: 200px;
        text-align: center;
        color: #fff;
        font-weight: bold;
        font-size: larger;
        background-color: #000;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      let count = 1
      let container = document.getElementById('container')
      function moveMouse() {
        container.innerHTML = count++
      }
      // 节流
      function throttle(func, wait) {
        var timeout
        return function () {
          if (!timeout) {
            timeout = setTimeout(() => {
              timeout = null
              func()
            }, wait)
          }
        }
      }
      container.onmousemove = throttle(moveMouse, 2000)
    </script>
  </body>
</html>