• 防抖：适用于处理用户停止频繁操作后的事件执行，例如输入框内容变动的场景。
• 节流：适用于控制高频事件的触发频率，例如滚动、窗口调整等场景。

都是为了优化性能，防止不必要的重复操作或过多的资源消耗。

防抖（Debounce）

防抖的作用是减少频繁触发事件，确保只有最后一次操作得到执行。防抖适用于那些用户可能会频繁触发的操作，但我们只关心最后一次操作结果的场景。

实现上，防抖通过计时器 setTimeout 来实现。如果在规定时间内用户再次触发了该事件，计时器就会被重置，只有当用户停止操作超过设定的时间时，计时器才会执行回调函数。

应用场景：

• 输入框的实时搜索建议。
• 窗口调整大小时的处理。

手写防抖

function debounce(fn, delay) {
    let timer = null;
    return function(...args) {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, args);
        }, delay);
    };
}
//使用
const handleInput = debounce(function() {
    console.log('Input processed:', this.value);
}, 500);

document.querySelector('input').addEventListener('input', handleInput);

节流（Throttle）

节流的作用是控制高频事件的触发频率，使得在一段时间内只能执行一次。节流适用于那些可能会频繁触发的操作，但我们希望在特定时间间隔内控制执行次数的场景。

实现上，节流可以通过标志位（flag）来控制函数的执行。函数在第一次执行后，会设置一个标志位阻止后续的执行，直到设定的时间间隔过去，再重置标志位以允许下一次执行。

应用场景：

• 滚动事件处理（如懒加载）。
• 按钮点击事件（避免多次提交）。

手写节流

function throttle(fn, interval) {
    let lastTime = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastTime >= interval) {
            lastTime = now;
            fn.apply(this,args);
        }
    };
}
//使用
const handleScroll = throttle(function() {
    console.log('Scroll event processed');
}, 500);

window.addEventListener('scroll', handleScroll);