什么是节流
节流是限制事件触发的频率，当持续触发事件时，在一定时间内只执行一次事件，这个效果跟英雄联盟里的闪现技能释放差不多。
函数防抖关注一定时间连续触发的事件只在最后执行一次，而函数节流侧重于一段时间内只执行一次。
间隔一段时间执行一次回调的场景有：
- 滚动加载，加载更多或滚到底部监听
- 谷歌搜索框，搜索联想功能
- 高频点击提交，表单重复提交
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>节流</title> <script src="https://cdn.bootcdn.net/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script> </head> <body> <div> 普通输入框： <input class="input1" /> </div> <div> 节流输入框： <input class="input2" /> </div> <script> // 普通 const inputEl1 = document.querySelector(".input1"); let counter1 = 1; inputEl1.oninput = function () { console.log(`发送网络请求${counter1++}`, this.value); }; // 节流处理过的 const inputEl2 = document.querySelector(".input2"); let counter2 = 1; inputEl2.oninput = _.throttle(function () { console.log(`节流处理：发送网络请求${counter2++}`, this.value); }, 1000); </script> </body> </html>
手写 throttle
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>手写节流</title> <script> // 时间戳实现节流 function kaimoThrottle(fn, delay) { let startTime = 0; let _throttle = function (...args) { let now = new Date().getTime(); let waitTime = delay - (now - startTime); if (waitTime <= 0) { fn.apply(this, args); startTime = now; } } return _throttle; } // setTimeout 实现节流 function kaimoThrottle2(fn, delay) { let timer = null; let _throttle = function (...args) { // 如果 timer 不为 null，说明上一个定时器还未执行，则直接返回 if (timer) { return; } // 开启新的一个定时器 timer = setTimeout(() => { // this 和参数绑定 fn.apply(this, args); // 函数执行完之后，将timer置为null timer = null; }, delay); }; return _throttle; } </script> </head> <body> <div> 节流输入框： <input class="input" /> </div> <script> const inputEl = document.querySelector(".input"); let counter = 1; inputEl.oninput = kaimoThrottle2(function (e) { console.log(`手写节流：发送网络请求${counter++}`, this, this.value); console.log(e); }, 1000); </script> </body> </html>
