在前端开发中，我们经常会遇到一些需要频繁触发的事件，比如滚动、窗口调整大小、键盘输入等。这些事件如果处理不当，会导致性能问题，甚至让页面变得卡顿。为了优化这些高频事件的处理，我们可以使用节流(Throttle)和防抖(Debounce)两种技术。小编将详细介绍节流功能的实现原理及其具体实现方法。
什么是节流(Throttle)?
节流(Throttle)是一种限制函数执行频率的技术。它确保在一定时间间隔内，函数只执行一次，无论在这段时间内该函数被触发了多少次。节流常用于控制滚动、窗口调整大小等事件的频率，以避免过度消耗资源。
节流的基本原理
节流的基本原理是使用一个定时器来记录上一次函数执行的时间，并在每次触发事件时检查当前时间与上一次执行时间的差值。如果差值大于或等于设定的时间间隔，则执行函数，并更新上一次执行时间;如果差值小于设定的时间间隔，则不执行函数。
节流的具体实现
下面是一个简单的节流函数实现：
function throttle(func, wait) { let lastTime = 0; // 上次执行时间 return function(...args) { const now = Date.now(); // 当前时间 if (now - lastTime >= wait) { // 当前时间与上次执行时间的差值是否大于或等于设定的时间间隔 lastTime = now; // 更新上次执行时间 func.apply(this, args); // 执行函数 } }; }
使用示例
假设我们有一个滚动事件监听器，每次滚动时都会执行一个函数。我们可以使用节流来限制这个函数的执行频率：
function onScroll() { console.log('Scroll event triggered'); // 其他滚动处理逻辑 } // 绑定滚动事件监听器，并使用节流函数限制执行频率 window.addEventListener('scroll', throttle(onScroll, 200));
在这个例子中，无论滚动事件被触发多少次，onScroll 函数每 200 毫秒最多只会被执行一次。
改进版节流函数
上面的节流函数有一个问题：如果在设定的时间间隔内最后一次触发事件后，函数没有被执行(因为时间间隔未到)，那么最后一次触发事件的处理逻辑就会被忽略。为了解决这个问题，我们可以引入一个定时器，在最后一次触发事件时确保函数能够执行。
function throttle(func, wait) { let lastTime = 0; // 上次执行时间 let timeoutId = null; // 定时器ID return function(...args) { const now = Date.now(); // 当前时间 if (!timeoutId) { // 如果没有定时器 if (now - lastTime >= wait) { // 当前时间与上次执行时间的差值是否大于或等于设定的时间间隔 lastTime = now; // 更新上次执行时间 func.apply(this, args); // 执行函数 } else { // 如果时间间隔未到，设置定时器在设定的时间间隔后执行函数 timeoutId = setTimeout(() => { lastTime = Date.now(); // 更新上次执行时间 func.apply(this, args); // 执行函数 timeoutId = null; // 清除定时器ID }, wait - (now - lastTime)); } } };
