javascript_如何实现函数节流
函数节流是控制高频事件触发下函数执行频率的优化技术，核心思想是在指定时间间隔内最多执行一次。通过时间戳实现时，记录上次执行时间，差值达标才执行并更新时间；通过定时器实现时，利用setTimeout延迟执行并防止重复创建；改进版结合两者，支持首次立即执行且末次有效，提升体验。根据需求选择方案，本质是节约资源、避免性能损耗。
。函数节流（Throttling）是一种优化手段，用于控制函数在一段时间内最多执行一次。它常用于处理高频触发事件，比如窗口滚动、鼠标移动或窗口缩放，避免因函数执行过于频繁而导致性能问题。
什么是函数节流
节流的核心思想是：无论事件触发多快，回调函数在指定的时间间隔内只执行一次。例如设置节流间隔为200ms，那么在这200ms内无论触发多少次事件，函数仅执行一次。
使用时间戳实现节流
通过记录上次执行时间，判断当前时间与上次执行时间的差值是否超过设定间隔，来决定是否执行函数。
- 每次触发时获取当前时间戳
- 与上一次执行的时间比较，若差值大于等于等待时间，则执行函数并更新时间戳
- 否则不执行
代码实现：
function throttle(func, delay) {
let previous = 0;
return function(...args) {
const now = Date.now();
if (now - previous >= delay) {
func.apply(this, args);
previous = now;
}
};
}使用定时器实现节流
利用 setTimeout 控制函数延迟执行，确保在指定时间内不会重复调用。
- 触发事件时，如果定时器不存在，则设置一个延迟执行的定时器
- 在延迟期间再次触发，不会创建新定时器
- 定时器执行后清除标识，允许下一次触发
代码实现：
function throttle(func, delay) {
let timer = null;
return function(...args) {
if (!timer) {
timer = setTimeout(() => {
func.apply(this, args);
timer = null;
}, delay);
}
};
}结合两种方式的改进版节流
有些场景希望首次触发立即执行，最后一次触发也能被执行。可以将时间戳和定时器结合使用，提升用户体验。
function throttle(func, delay) {
let timer = null;
let previous = 0;
return function(...args) {
const now = Date.now();
const remaining = delay - (now - previous);
if (remaining <= 0) {
if (timer) {
clearTimeout(timer);
timer = null;
}
func.apply(this, args);
previous = now;
} else if (!timer) {
timer = setTimeout(() => {
previous = Date.now();
timer = null;
func.apply(this, args);
}, remaining);
}};
}
基本上就这些。根据实际需求选择合适的方式，多数情况下简单的时间戳或定时器方案已足够使用。关键是理解节流的本质：控制执行频率，节省资源。
