js实现节流
节流的概念
节流（Throttle）是一种限制函数执行频率的技术，确保函数在指定时间间隔内最多执行一次。常用于高频事件（如滚动、输入、窗口调整）的性能优化。
实现方法
方法1：时间戳版
通过比较当前时间与上一次执行时间，决定是否执行函数。
function throttle(fn, delay) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastTime >= delay) {
fn.apply(this, args);
lastTime = now;
}
};
}特点：
- 首次触发立即执行。
- 停止触发后不会执行最后一次调用。
方法2：定时器版
通过定时器延迟执行函数，确保间隔内仅有一次执行。
function throttle(fn, delay) {
let timer = null;
return function(...args) {
if (!timer) {
timer = setTimeout(() => {
fn.apply(this, args);
timer = null;
}, delay);
}
};
}特点：
- 首次触发延迟执行。
- 停止触发后会执行最后一次调用。
方法3：结合版（推荐）
结合时间戳和定时器，实现首尾均执行的节流。
function throttle(fn, delay) {
let lastTime = 0, timer = null;
return function(...args) {
const now = Date.now();
const remaining = delay - (now - lastTime);
if (remaining <= 0) {
if (timer) {
clearTimeout(timer);
timer = null;
}
fn.apply(this, args);
lastTime = now;
} else if (!timer) {
timer = setTimeout(() => {
fn.apply(this, args);
lastTime = Date.now();
timer = null;
}, remaining);
}
};
}特点：
- 首次和最后一次均会执行。
- 间隔内严格保证一次执行。
使用示例
监听滚动事件并节流处理：
const handleScroll = throttle(() => {
console.log('Scroll event throttled');
}, 200);
window.addEventListener('scroll', handleScroll);应用场景
- 页面滚动加载更多内容。
- 输入框实时搜索建议（减少请求频率）。
- 窗口大小调整事件优化。
