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

Question

请分别实现JavaScript的函数节流（throttle）和函数防抖（debounce）函数，并解释在实际应用场景中，何时使用节流，何时使用防抖，比如在滚动事件和搜索框输入事件中应如何选择？

Answer 1

函数节流（throttle）实现

function throttle(func, delay) {
    let timer = null;
    return function() {
        if (!timer) {
            func.apply(this, arguments);
            timer = setTimeout(() => {
                timer = null;
            }, delay);
        }
    };
}

函数防抖（debounce）实现

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

应用场景分析

• 节流（throttle）：适用于需要在一定时间间隔内频繁触发，但又不想过于频繁执行的场景。例如，滚动事件。当页面滚动时，如果对滚动事件绑定的函数不进行节流处理，函数可能会被非常频繁地调用，导致性能问题。使用节流函数，可以限制函数在一定时间（如200毫秒）内只执行一次，既可以满足实时性需求，又不会过于频繁执行函数影响性能。
• 防抖（debounce）：适用于在某个操作连续触发时，不希望立即执行，而是在停止触发一段时间后再执行的场景。比如搜索框输入事件。用户在搜索框输入内容时，可能会连续输入多个字符，如果每次输入都立即发起搜索请求，会对服务器造成较大压力。使用防抖函数，当用户输入停止后（如500毫秒内没有新的输入），才执行搜索函数，这样可以有效减少不必要的请求。