JavaScript如何实现函数节流

# JavaScript如何实现函数节流 ## 什么是函数节流 函数节流（Throttle）是一种限制函数执行频率的技术，确保函数在指定时间间隔内最多执行一次。常用于高频触发事件（如滚动、窗口调整、输入框输入等）的性能优化。 ## 实现原理 通过时间戳或定时器控制函数执行： 1. **时间戳版**：记录上次执行时间，当前时间超过间隔才执行 2. **定时器版**：设置定时器，执行后清除，确保间隔期内只存在一个定时器 ## 代码实现 ```javascript // 时间戳实现 function throttle(fn, delay) { let lastTime = 0; return function(...args) { const now = Date.now(); if (now - lastTime >= delay) { fn.apply(this, args); lastTime = now; } }; } // 定时器实现 function throttle(fn, delay) { let timer = null; return function(...args) { if (!timer) { timer = setTimeout(() => { fn.apply(this, args); timer = null; }, delay); } }; } 

应用场景

• 窗口resize事件
• 页面滚动事件
• 按钮频繁点击
• 鼠标移动事件

通过节流可以有效减少不必要的计算和DOM操作，提升页面性能。 “`