面试题：JavaScript 事件防抖在复杂场景中的应用及优化

Question

假设在一个实时搜索功能中，用户输入内容后立即发起搜索请求，为了避免频繁请求服务器，需要使用事件防抖技术。请详细说明实现思路，并编写一个能处理复杂场景（如考虑多次连续触发时的情况）的事件防抖函数，同时说明如何进行性能优化。

Answer 1

实现思路

1. 定义延迟时间：设定一个延迟时间delay，这个时间决定了在最后一次触发事件后多久执行实际的搜索函数。
2. 使用定时器：每次触发输入事件时，清除之前设置的定时器，并重新设置一个新的定时器。如果在延迟时间内再次触发事件，新的定时器会覆盖旧的，从而保证在用户停止输入delay时间后才执行搜索。
3. 考虑多次连续触发：每次触发事件都要重新计时，确保只要用户在持续输入，实际搜索就不会执行。

代码实现

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

// 使用示例
const searchInput = document.getElementById('searchInput');
const searchFunction = function() {
    console.log('执行搜索，输入值为:', this.value);
};
const debouncedSearch = debounce(searchFunction, 300);
searchInput.addEventListener('input', debouncedSearch);

性能优化

1. 合理设置延迟时间：延迟时间不能过长，否则用户等待时间久；也不能过短，避免达不到防抖效果。需要根据业务场景和服务器性能进行测试调整。
2. 减少不必要计算：在防抖函数内部，尽量减少复杂计算，特别是在定时器回调中。将复杂计算放到防抖函数外部，仅在真正执行搜索时调用。
3. 清除定时器：确保每次新事件触发时都清除之前的定时器，避免内存泄漏。
4. 节流与防抖结合：在一些极端场景下，可以考虑结合节流技术，限制事件触发频率，进一步优化性能。例如，先节流保证一定时间内只触发一次，然后在节流的触发内使用防抖来处理多次连续触发的情况。