温馨提示×

JavaScript函数节流如何实现

小樊
47
2025-08-28 12:36:34
栏目: 编程语言

JavaScript 函数节流(throttle)是一种优化手段,用于限制某个函数在指定时间间隔内只能执行一次。这在处理高频触发事件(如滚动、窗口大小调整等)时非常有用,可以提高性能。

以下是一个简单的 JavaScript 函数节流实现:

function throttle(func, delay) { let lastCall = 0; // 上次调用的时间戳 let timer = null; // 定时器 return function (...args) { const now = Date.now(); // 当前时间戳 if (now - lastCall >= delay) { // 如果距离上次调用已经超过指定的时间间隔,则立即执行函数 lastCall = now; func.apply(this, args); } else if (!timer) { // 如果距离上次调用还未超过指定的时间间隔,则设置一个定时器,在指定时间间隔后执行函数 timer = setTimeout(() => { lastCall = Date.now(); func.apply(this, args); timer = null; }, delay - (now - lastCall)); } }; } 

使用示例:

function onScroll() { console.log('滚动事件触发'); } const throttledOnScroll = throttle(onScroll, 200); window.addEventListener('scroll', throttledOnScroll); 

在这个示例中,onScroll 函数会在滚动事件触发时被节流,确保在 200 毫秒内最多执行一次。

0