节流模式
2020/12/8 8:25:24
本文主要是介绍节流模式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
节流模式
屏蔽重复的业务逻辑,只执行最后一次的操作,就叫做节流模式。
使用场景
节流模式的核心思想是创建计时器,延迟程序的执行。
比如一些常见的事件,scroll、resize、dragover等,这类事件属于高频触发事件,会多次调用事件处理程序。
例子:
let n = 0; window.onresize = () => { console.log(n++); };
打开浏览器的开发者模式,可以发现,当浏览器的窗口进行缩放时,会多次打印数字。
我们可以用节流模式去解决这个问题。
例子:
// 创建一个节流器 const throttle = (() => { let timer = null; return ({ handle = () => {}, time = 300 } = {}) => { // 清除计时器句柄 clearTimeout(timer); // 创建计时器句柄,延迟函数的执行 timer = setTimeout(() => { handle(); }, time); }; })(); // 测试节流器 let n = 0; window.onresize = () => { throttle({ handle: () => { console.log(n++); }, time: 500, }); };
优化之后的代码,每缩放一次浏览器的窗口,只会打印一个数字。
除了对事件进行优化,节流模式的用处非常广泛,试想一个这样的场景:有一行文字,当鼠标滑过某些特殊字符的时候,会展示提示内容。
例子:
<style> span { background-color: beige; font-size: 12px; display: none; } </style> <p><strong>*宋仁宗赵祯*</strong>,初名赵受益,宋朝第四位皇帝。</p> <span>公元1010年5月30日至1063年4月30日</span> <script> const txt = document.querySelector("strong"); const tip = document.querySelector("span"); txt.addEventListener("mouseenter", () => { tip.style.display = "block"; }); txt.addEventListener("mouseleave", () => { tip.style.display = "none"; }); </script>
例子中,按正常的交互,鼠标移入“宋仁宗赵祯”时就展示提示内容,移除时提示内容消失。如果用户只是无意间移入和移除,冒然展示提示内容显得很不友好,此时,我们也可以使用节流模式延迟程序的执行。
例子:
<style> span { background-color: beige; font-size: 12px; display: none; } </style> <p><strong>*宋仁宗赵祯*</strong>,初名赵受益,宋朝第四位皇帝。</p> <span>公元1010年5月30日至1063年4月30日</span> <script> const txt = document.querySelector("strong"); const tip = document.querySelector("span"); // 节流器 const throttle = (() => { let timer = null; return ({ handle = () => {}, time = 300 } = {}) => { // 清除计时器句柄 clearTimeout(timer); // 创建计时器句柄,延迟函数的执行 timer = setTimeout(() => { handle(); }, time); }; })(); txt.addEventListener("mouseenter", () => { throttle({ handle: () => { tip.style.display = "block"; }, time: 500, }); }); txt.addEventListener("mouseleave", () => { throttle({ handle: () => { tip.style.display = "none"; }, time: 500, }); }); </script>
做过前端埋点的程序员应该都清楚,我们并不会每触发一次事件就发送一次请求,而是要等到触发次数到达一定数量时(或者依据停留页面时间),才发送一次请求,这里面其实也用到了节流模式。
例子:
<label>姓名:</label> <select> <option value="Tom">Tom</option> <option value="Amy">Amy</option> </select> <br /> <label>职业:</label> <select> <option value="Teacher">Teacher</option> <option value="Police">Police</option> </select> <br /> <label>国籍:</label> <select> <option value="China">China</option> <option value="Japan">Japan</option> </select> <script> const select = document.querySelectorAll("select"); // 利用节流模式,统一发送数据 const keepLog = (() => { let list = []; const max = 3; const sendLog = () => { console.log(`发送数据:${list}`); list = []; }; return ({ id = `Log${Date.now()}`, etype = "", context = "" } = {}) => { list.push(`${id}||${etype}||${context}`); if (list.length >= max) { sendLog(); } }; })(); // 测试 [...select].forEach((item) => { item.addEventListener("change", (e) => { keepLog({ etype: "change", context: e.currentTarget.value, }); }); }); </script>
如有错误,欢迎指正,本人不胜感激。
这篇关于节流模式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-06小米11i印度快充版ROM合集:极致体验,超越期待
- 2024-10-06【ROM下载】小米11i 5G 印度版系统, 疾速跃迁,定义新速度
- 2024-10-06【ROM下载】小米 11 青春活力版,青春无极限,活力全开
- 2024-10-05小米13T Pro系统合集:性能与摄影的极致融合,值得你升级的系统ROM
- 2024-10-01基于Python+Vue开发的医院门诊预约挂号系统
- 2024-10-01基于Python+Vue开发的旅游景区管理系统
- 2024-10-01RestfulAPI入门指南:打造简单易懂的API接口
- 2024-10-01初学者指南:了解和使用Server Action
- 2024-10-01Server Component入门指南:搭建与配置详解
- 2024-10-01React 中使用 useRequest 实现数据请求