面试题：JavaScript 函数性能优化之节流与防抖

Question

请描述 JavaScript 中节流（throttle）和防抖（debounce）函数的原理，并分别实现一个简单的节流和防抖函数，说明它们在实际场景中的应用。

Answer 1

节流（Throttle）原理

节流函数的原理是，在一定时间间隔内，无论触发多少次事件，都只执行一次函数。就像水龙头节流一样，控制水流的频率。

节流函数实现

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

防抖（Debounce）原理

防抖函数的原理是，当事件触发时，设定一个延迟时间，在延迟时间内如果再次触发事件，则重新计算延迟时间，直到延迟时间结束且期间没有再次触发事件，才执行函数。可以理解为防止抖动，等“抖动”结束再执行。

防抖函数实现

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

实际场景应用

• 节流应用场景：
  • 滚动事件：比如监听页面滚动加载更多数据，如果不节流，每次滚动触发事件可能过于频繁导致性能问题，使用节流可按一定频率加载数据。
  • 鼠标移动事件：在一些需要跟随鼠标移动实时显示信息的场景中，使用节流控制信息更新频率，避免频繁计算和渲染。
• 防抖应用场景：
  • 搜索框输入：用户在搜索框输入内容时，实时发起搜索请求会造成大量请求，使用防抖可以在用户停止输入一段时间后再发起请求，减少不必要的请求。
  • 窗口大小调整：当窗口大小改变时，可能会触发大量事件，使用防抖可以在窗口大小调整结束后再执行相关布局调整等操作，避免频繁重绘。