js截流怎么实现
实现 JavaScript 截流（Throttling）的方法
截流（Throttling）是一种控制函数执行频率的技术，确保函数在一定时间间隔内最多执行一次。以下是几种常见的实现方式：
使用时间戳实现基础截流
通过比较当前时间与上一次执行时间来判断是否执行函数。
function throttle(func, delay) {
let lastCall = 0;
return function(...args) {
const now = new Date().getTime();
if (now - lastCall >= delay) {
func.apply(this, args);
lastCall = now;
}
};
}使用定时器实现延迟执行
在延迟时间内只设置一次定时器，确保函数在延迟结束后执行。
function throttle(func, delay) {
let timeoutId = null;
return function(...args) {
if (!timeoutId) {
timeoutId = setTimeout(() => {
func.apply(this, args);
timeoutId = null;
}, delay);
}
};
}结合时间戳和定时器的优化版本
首次触发立即执行，后续触发在延迟结束后执行，同时确保最后一次触发被执行。
function throttle(func, delay) {
let lastCall = 0;
let timeoutId = null;
return function(...args) {
const now = new Date().getTime();
const remaining = delay - (now - lastCall);
if (remaining <= 0) {
if (timeoutId) {
clearTimeout(timeoutId);
timeoutId = null;
}
func.apply(this, args);
lastCall = now;
} else if (!timeoutId) {
timeoutId = setTimeout(() => {
func.apply(this, args);
timeoutId = null;
lastCall = new Date().getTime();
}, remaining);
}
};
}使用 Lodash 库的截流函数
如果项目中已引入 Lodash，可以直接使用其提供的 _.throttle 方法。
const throttledFunc = _.throttle(originalFunc, 300);实际应用示例
以下是一个滚动事件中使用截流的例子：
window.addEventListener('scroll', throttle(function() {
console.log('Scroll event throttled');
}, 300));截流技术适用于高频触发的事件（如滚动、窗口调整、鼠标移动等），可以有效减少不必要的计算或请求，提升性能。
