@前端----节流防抖

节流（Throttle） 和 防抖（Debounce） 是前端开发中常用的两种性能优化技术，主要用于控制函数执行的频率，特别是在处理频繁触发的事件（如滚动、输入、窗口调整等）时。

1. 节流（Throttle）

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

简单理解：

• 就像水龙头，即使你一直开着，水也不会一直流，而是每隔一段时间流一次。

适用场景：

• 滚动事件（scroll）

• 窗口调整（resize）

• 鼠标移动（mousemove）

简单示例：

javascript

复制

function throttle(func, delay) {
    let lastCall = 0;
    return function(...args) {
        const now = new Date().getTime();
        if (now - lastCall >= delay) {
            lastCall = now;
            func.apply(this, args);
        }
    };
}

// 使用节流函数
window.addEventListener('scroll', throttle(() => {
    console.log('Scroll event triggered');
}, 1000)); // 1秒内最多执行一次

2. 防抖（Debounce）

防抖 是指在一定时间间隔内，如果事件被连续触发，函数不会执行，只有当事件停止触发一段时间后，函数才会执行一次。

简单理解：

• 就像电梯门，只有当一段时间内没有人再进入时，电梯门才会关闭。

适用场景：

• 输入框实时搜索（input）

• 窗口调整（resize）

• 按钮点击（click）

简单示例：

javascript

复制

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

// 使用防抖函数
const input = document.querySelector('input');
input.addEventListener('input', debounce(() => {
    console.log('Input event triggered');
}, 300)); // 300ms内没有输入时才会执行

总结：

• 节流：固定时间间隔内最多执行一次。

• 防抖：事件停止触发一段时间后执行一次。

根据具体场景选择合适的优化方式，可以有效提升页面性能。