老生常谈的东西，但今天突然顿悟！又非常直观！一改以往绕来绕去只能记几天的情况
想忘都很难，喜出望外🎉
一、理解
(一) 防抖（Debounce）
理解为防止抖动，对标物理学的“抖动”或“震动”，（脑子里可以想象有一个钟摆）比如：
- 当你按下一个按钮，类似于“抖动”；
- 当你发疯一样多次按下按钮，就产生了多个快速、重复的抖动；
防抖的目的就是消除这些多余的抖动，让操作只在最后一次抖动停止后执行一次（1s的防抖 = 等钟摆停止抖动 1s 后执行）。
(二) 节流（Throttle）
对标物理学中的节流阀（throttle valve）：用于控制液体或气体流量，让流量保持在一个可控范围内，不会太快。
节流函数就像“加上节流阀”，限制事件触发的频率，确保在一定时间内只执行一次函数。
二、时间图
三、代码实现
(一) 防抖
function debounce(fn, delay) {
let timer;
return function(...args) {
clearTimeout(timer); // 清除上一次的定时器
timer = setTimeout(() => {
fn(...args); // 在延迟时间后执行函数
}, delay);
};
}
// 示例
const handleInput = debounce((event) => {
console.log('Input event: ', event.target.value);
}, 500);
document.querySelector('input').addEventListener('input', handleInput);
(二) 节流
function throttle(fn, delay) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastTime >= delay) {
fn(...args);
lastTime = now;
}
};
}
// 示例
const handleScroll = throttle(() => {
console.log('Scroll event');
}, 1000);
window.addEventListener('scroll', handleScroll);
四、总结
- 防抖（Debounce） → 消除“抖动”，只在动作停止后触发
- 节流（Throttle） → 控制“流量”，按固定频率触发
