防抖与节流

防抖（Debouncing）和节流（Throttling）是两种常用的优化技术，用于限制函数调用的频率，特别是在处理频繁触发的事件（如滚动事件、键盘输入事件、窗口大小调整事件等）时，可以显著提高性能和减少资源消耗。

防抖：​编辑类似于王者荣耀的游戏​​​​​​​回城，一直点是没有用的，只执行最后一次。

节流：类似于王者荣耀的技能冷却，点了之后一段时间再次点击是无效的。

防抖（Debouncing）

定义:

• 防抖是指在事件被触发后，延迟一段时间再执行函数。如果在延迟期间事件再次被触发，则重新计时。只有在延迟期间没有新的事件触发时，函数才会被执行。

应用场景:

• 搜索框输入，等待用户停止输入后再进行搜索。
• 窗口大小调整，等待用户停止调整窗口大小后再重新计算布局。

实现:

• 使用setTimeout来实现延迟执行，并在每次事件触发时清除之前的setTimeout。

function debounce(func, wait) {
    let timeout;
    return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), wait);
    };
}

// 使用示例
const handleResize = debounce(() => {
    console.log('Window resized');
}, 300);

window.addEventListener('resize', handleResize);

节流（Throttling）

定义:

• 节流是指在一定时间内只执行一次函数。即使事件被频繁触发，函数也只会按固定的时间间隔执行。

应用场景:

• 滚动事件，限制滚动事件的处理频率，避免性能问题。
• 按钮点击，防止用户短时间内多次点击导致重复操作。

实现:

• 使用setTimeout来控制函数的执行频率，并在每次事件触发时检查是否已经有一个定时器在运行。

function throttle(func, wait) {
    let timeout = null;
    return function(...args) {
        if (!timeout) {
            timeout = setTimeout(() => {
                func.apply(this, args);
                timeout = null;
            }, wait);
        }
    };
}

// 使用示例
const handleScroll = throttle(() => {
    console.log('Scrolled');
}, 300);

window.addEventListener('scroll', handleScroll);

防抖：在事件被触发后延迟一段时间执行函数，如果在延迟期间事件再次被触发，则重新计时。适用于等待用户停止操作后再执行的场景。

节流：在一定时间内只执行一次函数，即使事件被频繁触发。适用于需要限制事件处理频率的场景。

这两种技术都可以通过setTimeout来实现，具体选择哪种技术取决于应用场景和需求。