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

1. 节流（Throttle）

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

简单理解：

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

适用场景：

• 滚动事件（scroll）

• 窗口调整（resize）

• 鼠标移动（mousemove）

简单示例：

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);
        }
    };
}

2. 防抖（Debounce）

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

简单理解：

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

适用场景：

• 输入框实时搜索（input）

• 窗口调整（resize）

• 按钮点击（click）

简单示例：

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

总结：

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

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

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

产品思维的PM程序员~
工作1-3年，基础知识,多看书。多跟着别人做项目，学习经验。 工作3-5年，新知识，高级知识，自己独立做项目，总结经验。尝试不同的语言。 工作5-8年，工作职位，要从设计，管理方面要求自己,可以尝试走管理路线(项目经理或cto)。 工作10年及以上, 自己做些项目，产品,尝试为创业做准备。 上大学和不上大学区别很大，上品牌大学和普通大学区别也很大，后天的努力最大。 ---无论它是在遥远的远方,还是在出发的地方、哪里有希望哪里就是我们的方向;终点、只不过是梦想起飞的地方。