函数节流通过限制执行频率优化高频事件，如滚动或点击，确保在设定间隔内仅执行一次，提升性能。
函数节流（Throttle）是一种控制函数执行频率的技术，常用于优化高频触发的事件，比如窗口滚动、调整大小、鼠标移动等。它的核心思想是：在一定时间间隔内，无论触发多少次函数，都只执行一次。
函数节流的基本定义
节流函数接收两个参数：一个是需要被节流的函数，另一个是时间间隔（毫秒）。返回一个新的函数，这个新函数在被调用时会控制原函数的执行频率。
实现原理是在第一次调用时立即执行，然后在设定的时间间隔内忽略后续调用，直到时间过去后再允许下一次执行。
示例代码：
function throttle(fn, delay) {
let lastTime = 0;
return function (...args) {
const now = Date.now();
if (now - lastTime >= delay) {
fn.apply(this, args);
lastTime = now;
}
};
}上面的实现通过记录上次执行的时间，判断当前时间与上次执行的时间差是否超过设定的延迟，若满足条件则执行函数并更新时间戳。
使用场景与实际应用
节流特别适合那些不需要每次触发都响应，但又要保持一定频率执行的场景。
- 窗口滚动事件：监听页面滚动位置，避免频繁计算元素是否进入视口。
- 按钮防抖误触：限制按钮点击提交操作，防止用户快速多次点击。
- Canvas 鼠标绘制：在画布上根据鼠标移动绘图时，减少绘制频率以提升性能。
使用示例：
const handleScroll = () => {
console.log("页面滚动中...");
};
window.addEventListener("scroll", throttle(handleScroll, 200));这样每200毫秒最多执行一次滚动处理函数，减轻浏览器负担。
与防抖的区别与选择
节流和防抖（debounce）都用于控制函数执行频率，但行为不同：
- 节流：保证函数在固定时间间隔内至少执行一次，适用于持续性事件。
- 防抖：只在连续调用结束后执行一次，适用于搜索输入、表单验证等最终结果场景。
选择哪种方式取决于业务需求。如果需要“匀速执行”，选节流；如果只关心“最后一次结果”，选防抖。
进阶技巧：带立即执行选项的节流
有时我们希望第一次触发立即执行，而不是等待间隔结束。可以通过添加配置项来增强灵活性。
```javascript function throttle(fn, delay, { leading = true } = {}) { let lastTime = 0; return function (...args) { const now = Date.now(); if (!leading && lastTime === 0) { lastTime = now; } if (now - lastTime >= delay) { fn.apply(this, args); lastTime = now; } }; } ```设置 leading: false 可以禁用首次立即执行，适应更多场景。
基本上就这些。掌握节流函数的定义与实现，能有效提升前端性能，避免不必要的重复计算和资源浪费。
