js截流实现
截流（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;
}
};
}包含尾部调用版本
确保最后一次触发会被执行：
function throttle(fn, delay) {
let timer = null;
let lastTime = 0;
return function(...args) {
const now = Date.now();
const remaining = delay - (now - lastTime);
clearTimeout(timer);
if (remaining <= 0) {
fn.apply(this, args);
lastTime = now;
} else {
timer = setTimeout(() => {
fn.apply(this, args);
lastTime = Date.now();
}, remaining);
}
};
}使用场景示例
滚动事件优化：
window.addEventListener('scroll', throttle(() => {
console.log('处理滚动逻辑');
}, 200));与防抖（Debounce）的区别
- 截流：固定时间间隔执行（如每200ms）
- 防抖：停止触发后延迟执行（如输入停止500ms后）
现代浏览器原生支持
部分浏览器已支持requestIdleCallback：
window.requestIdleCallback(() => {
// 空闲时执行的任务
});注意事项
- 时间间隔不宜过短（建议≥16ms，对应60fps）
- 在React等框架中可能需要使用
useCallback包裹 - 清除定时器避免内存泄漏
