屏蔽重复的业务逻辑,只执行最后一次的操作,就叫做节流模式。
节流模式的核心思想是创建计时器,延迟程序的执行。
比如一些常见的事件,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>
如有错误,欢迎指正,本人不胜感激。