大话解释 节流 throttling

大话解释 节流 throttling

技术杂谈小彩虹2021-08-24 19:09:28200A+A-

大话解释 节流 throttling

概念

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

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

过程

这样理解:

image-20210513151031644.png

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

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

代码 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>

效果 2

1.gif

2.gif

好友微信号

添加大佬微信 和上千同伴一起提升技术交流生活

hsian_

最后

码字不容易 你的点击关注点赞留言就是我最好的驱动

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示 | 支付宝红包
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们