推荐答案
节流 (Throttle)
节流是一种限制函数执行频率的技术，确保函数在一定时间间隔内最多执行一次。
// www.javascriptcn.com code example
function throttle(func, delay) {
let lastCall = 0;
return function(...args) {
const now = new Date().getTime();
if (now - lastCall < delay) return;
lastCall = now;
return func.apply(this, args);
};
}
// 使用示例
const throttledFunction = throttle(() => {
console.log('Throttled function called');
}, 1000);
window.addEventListener('scroll', throttledFunction);防抖 (Debounce)
防抖是一种延迟函数执行的技术，确保函数在最后一次调用后的一段时间内只执行一次。
// www.javascriptcn.com code example
function debounce(func, delay) {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
// 使用示例
const debouncedFunction = debounce(() => {
console.log('Debounced function called');
}, 1000);
window.addEventListener('resize', debouncedFunction);本题详细解读
节流 (Throttle)
节流的核心思想是确保函数在一定时间间隔内最多执行一次。这在处理频繁触发的事件（如滚动、鼠标移动等）时非常有用，可以避免过多的函数调用导致性能问题。
实现原理：通过记录上一次函数调用的时间戳，每次调用时检查当前时间与上一次调用时间的差值，如果差值小于设定的时间间隔，则忽略此次调用；否则，执行函数并更新上一次调用的时间戳。
适用场景：适用于需要限制函数执行频率的场景，如滚动事件、鼠标移动事件等。
防抖 (Debounce)
防抖的核心思想是延迟函数的执行，直到事件停止触发一段时间后再执行。这在处理用户输入、窗口调整大小等场景时非常有用，可以避免在事件频繁触发时多次执行函数。
实现原理：通过设置一个定时器，每次调用时清除之前的定时器并重新设置一个新的定时器。只有在事件停止触发一段时间后，定时器才会触发，执行函数。
适用场景：适用于需要延迟函数执行的场景，如输入框输入、窗口调整大小等。
总结
节流和防抖都是用来优化高频事件处理的技术，但它们的使用场景和实现方式有所不同。节流适用于需要限制函数执行频率的场景，而防抖适用于需要延迟函数执行的场景。在实际开发中，根据具体需求选择合适的技术可以有效提升应用的性能。