大话解释节流 throttling

概念

节流（throttling）做为编程中一种比较常见的编程方式，在实际工作开发中相当常见，如在移动端中实现 滚动分页。

我们可以将节流理解为一个开关，当条件满足时，开关打开进行后续操作，当条件不满足时，开关关闭，终止当前操作。

过程

这样理解：

去公共厕所上厕所
如果发现厕所的门是关着的，就表示厕所里面有人，那我们终止上厕所的操作。
如果发现厕所的门是打开的，那就表示厕所里面没有人，我们可以进去上厕所。但同时不要忘记关好门。
等待我们上完厕所后，我们会走出来，这个时候必须要记得打开门
其他人发现门是打开的，就表示他们可以进去上厕所

上述的过程，厕所的门 其就是我们的开关了。

代码 1

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

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

    body {
      background: url(./1.jpg) no-repeat 0 0 / 100% 100% fixed;
      height: 100vh;
    }

    ul {
      list-style: none;
    }

    li {
      height: 40px;
      border: 1px dashed #ccc;
      color: #fff;
    }
  </style>
</head>

<body>
  <ul id="ul"></ul>
  <script>

    // 生成100个li标签
    Object.keys(new Array(100).toString()).forEach(val => ul.innerHTML += `<li>${+val + 1}</li>`)


    // 定义变量 表示 厕所 开门 还是 关门
    let door = true;

    window.onscroll = function () {
      // 厕所 不开门
      if (!door) {
        console.log("别来，厕所里面有人啦 ? ");
        return
      };
      // 自己关门
      door = false;
      console.log("轮到我上厕所啦 开心");
      setTimeout(() => {
        console.log("上完啦 ?");
        // 重新打开门
        door = true;
      }, 2000);
    }

  </script>
</body>

</html>
复制代码

效果 1

工作运用

将以上代码稍作修改，一个原生js的滚动分页功能就可以实现

代码 2

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

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

    body {
      background: url(./1.jpg) no-repeat 0 0 / 100% 100% fixed;
      height: 100vh;
    }

    ul {
      list-style: none;
    }

    li {
      height: 40px;
      border: 1px dashed #ccc;
      color: #fff;
    }
  </style>
</head>

<body>
  <ul id="ul"></ul>
  <script>
    // 生成100个li标签
    Object.keys(new Array(20).toString()).forEach(val => ul.innerHTML += `<li>${+val + 1}</li>`)


    let door = true;

    window.onscroll = function () {
      if (!door) {
        console.log("数据还没有请求完毕 ");
        return
      };

      // 判断滚动条是否触底
      const scrollTop = ul.offsetHeight - document.body.offsetHeight - pageYOffset;
      if (scrollTop >= 5) {
        console.log("滚动条还没有触底");
        return
      }

      door = false;
      console.log("开始发送请求 获取数据。。。。。。。。。。");
      setTimeout(() => {
        Object.keys(new Array(20).toString()).forEach(val => ul.innerHTML += `<li>${+ul.childElementCount + 1}</li>`)
        console.log("数据回来了 渲染完毕");
        door = true;
      }, 2000);
    }

  </script>
</body>

</html>
复制代码