面试题：JavaScript中节流与防抖的区别

节流（throttle）与防抖（debounce）技术的区别

定义
- 防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
- 节流：规定一个单位时间，在这个单位时间内，只能触发一次函数。无论事件触发频率多高，都只会在规定时间内执行一次。
触发频率
- 防抖：如果事件连续快速触发，回调函数不会立即执行，而是在最后一次触发停止后的指定时间后执行。例如，用户连续快速点击按钮，只有在停止点击后的特定时间（如300毫秒）才会真正执行按钮的点击逻辑。
- 节流：事件触发会按一定的频率间隔执行回调函数。比如，滚动事件触发频率很高，通过节流可以设置每500毫秒执行一次滚动事件的处理函数。
应用场景
- 防抖：适用于触发频率高但不需要立即响应的场景，比如搜索框的输入联想，用户边输入边联想，如果不防抖，每次输入都会发起请求，浪费资源，防抖后可在用户停止输入后再发起请求。
- 节流：适用于需要按一定频率执行的场景，像页面滚动加载更多数据，频繁滚动会导致多次请求数据，节流可以限制在一定时间内只请求一次。

实际开发场景中的应用举例

防抖应用 - 搜索框输入联想

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

const searchInput = document.getElementById('searchInput');
const debouncedSearch = debounce(() => {
    const value = searchInput.value;
    // 这里发起搜索请求
    console.log(`发起搜索请求，搜索内容为: ${value}`);
}, 300);

searchInput.addEventListener('input', debouncedSearch);

节流应用 - 页面滚动加载更多

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

const loadMore = () => {
    // 这里执行加载更多数据的逻辑
    console.log('加载更多数据');
};

window.addEventListener('scroll', throttle(loadMore, 500));

星途面试题库

面试题：JavaScript中节流与防抖的区别

知识考点

面试题答案

节流（throttle）与防抖（debounce）技术的区别

实际开发场景中的应用举例