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

Question

请简述 JavaScript 防抖函数的实现原理，并举例说明在实际项目中哪些场景会用到防抖技术。同时，手动实现一个简单的防抖函数。

Answer 1

防抖函数实现原理

防抖（Debounce）的原理是：当一个事件触发后，设定一个延迟时间 delay，在这个延迟时间内如果该事件再次被触发，则清除之前设定的定时器，重新开始计时。只有在延迟时间内没有再次触发该事件时，才会真正执行我们想要的操作。这样可以避免在短时间内频繁触发事件导致的性能问题。

实际项目中防抖技术的应用场景

1. 搜索框输入：在用户输入搜索关键词时，不希望每次按键都发起搜索请求，而是等待用户输入结束（比如停止输入1秒后），再发起搜索，这样可以减少不必要的请求，提高性能和用户体验。
2. 窗口resize事件：当用户调整浏览器窗口大小时，频繁触发 resize 事件可能会导致性能问题。使用防抖技术可以在用户停止调整窗口大小后，再执行相关的布局调整等操作。
3. 按钮提交：防止用户多次点击提交按钮，在一定时间内只允许一次提交操作，避免重复提交数据。

手动实现简单的防抖函数

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

你可以这样使用这个防抖函数：

// 假设我们有一个模拟的搜索函数
function search() {
    console.log('执行搜索操作');
}
// 创建一个防抖后的搜索函数，延迟1000毫秒
const debouncedSearch = debounce(search, 1000);
// 在输入事件中调用防抖后的函数
document.getElementById('searchInput').addEventListener('input', debouncedSearch);