面试题：JavaScript 中函数的防抖与节流实现原理及应用场景

Question

请简要描述函数防抖（Debounce）和节流（Throttle）的实现原理，并分别列举至少一个在实际项目中可能用到的应用场景，同时用 JavaScript 代码实现简单的防抖和节流函数。

Answer 1

函数防抖（Debounce）

1. 实现原理：
   • 函数防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。简单来说，就是延迟执行函数，在规定时间内如果再次触发，就取消之前的延迟执行，重新开始计时。
2. 应用场景：
   • 搜索框输入联想：用户在搜索框中输入内容时，频繁触发输入事件。使用防抖可以避免在用户输入过程中频繁发起搜索请求，只有在用户停止输入一段时间后才发起请求，减轻服务器压力。
   • 窗口resize事件：当窗口大小改变时，resize事件会频繁触发。防抖处理后，只有在窗口大小停止改变一段时间后，才执行相关的布局调整等操作，避免频繁计算。
3. JavaScript 代码实现：

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

函数节流（Throttle）

1. 实现原理：
   • 函数节流是指规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被多次触发，只有一次能生效。就像水流通过节流阀一样，按一定频率流出。
2. 应用场景：
   • 滚动条滚动事件：当页面滚动时，scroll事件会频繁触发。节流处理后，按固定频率执行相关的滚动加载等操作，避免过于频繁执行导致性能问题。
   • 鼠标连续点击：在按钮点击场景下，防止用户连续快速点击多次，通过节流控制，保证在一定时间内只能触发一次点击事件的响应逻辑。
3. JavaScript 代码实现：

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