如何通过JavaScript的DOM事件节流和防抖优化性能，以及它们在高频事件处理中的实现差异？

setTimeout

setTimeout

function debounce(func, delay) {
    let timeoutId;
    return function(...args) {
        const context = this;
        clearTimeout(timeoutId); // 清除上一个定时器
        timeoutId = setTimeout(() => {
            func.apply(context, args); // 延迟执行函数
        }, delay);
    };
}

// 示例：
const myEfficientFn = debounce(() => {
    console.log('窗口大小调整完成！');
}, 300);

window.addEventListener('resize', myEfficientFn);

function throttle(func, limit) {
    let inThrottle;
    let lastFunc;
    let lastRan;
    return function(...args) {
        const context = this;
        if (!inThrottle) {
            func.apply(context, args); // 立即执行一次
            lastRan = Date.now();
            inThrottle = true;
        } else {
            clearTimeout(lastFunc); // 清除上一个延迟执行的定时器
            lastFunc = setTimeout(() => {
                if ((Date.now() - lastRan) >= limit) {
                    func.apply(context, args);
                    lastRan = Date.now();
                }
            }, limit - (Date.now() - lastRan)); // 确保在冷却期结束时执行
        }
    };
}

// 示例：
const myScrollHandler = throttle(() => {
    console.log('正在滚动...');
}, 200);

window.addEventListener('scroll', myScrollHandler);

leading

trailing

setTimeout

clearTimeout

setTimeout

clearTimeout

keyup

resize

clearTimeout

leading

leading

trailing

this

leading

trailing

this

function debounce(func, delay, immediate = false) {
    let timeoutId;
    let result; // 用于存储函数执行结果

    return function(...args) {
        const context = this; // 保存当前的this上下文

        const later = function() {
            timeoutId = null;
            if (!immediate) {
                result = func.apply(context, args); // 延迟执行
            }
        };

        const callNow = immediate && !timeoutId; // 是否立即执行

        clearTimeout(timeoutId); // 每次触发都清除前一个定时器
        timeoutId = setTimeout(later, delay); // 重新设置定时器

        if (callNow) {
            result = func.apply(context, args); // 立即执行
        }

        return result; // 返回函数执行结果
    };
}

// 示例用法：
const searchInput = document.getElementById('search-input');
if (searchInput) {
    searchInput.addEventListener('input', debounce(function(event) {
        console.log('搜索内容:', event.target.value);
        // 这里可以使用this来访问searchInput元素，因为它被正确绑定了
        console.log('this指向:', this); 
    }, 500));

    // 立即执行的防抖，比如点击按钮，第一次点击立即响应，后续点击在冷却期内被忽略
    const clickBtn = document.getElementById('click-btn');
    if (clickBtn) {
        clickBtn.addEventListener('click', debounce(function() {
            console.log('按钮被点击了，立即响应！');
        }, 1000, true)); // immediate: true
    }
}

leading

trailing

function throttle(func, limit, options = {}) {
    let timeoutId;
    let lastArgs;
    let lastThis;
    let lastResult;
    let lastRan = 0; // 上次执行的时间戳

    const { leading = true, trailing = true } = options; // 默认leading和trailing都为true

    const throttled = function(...args) {
        const now = Date.now();
        lastArgs = args;
        lastThis = this;

        if (!lastRan && !leading) { // 如果是第一次触发，且不允许leading执行
            lastRan = now; // 相当于把第一次执行的时间推迟到未来
        }

        if (now - lastRan >= limit) {
            // 冷却期已过，可以执行
            if (timeoutId) {
                clearTimeout(timeoutId);
                timeoutId = null;
            }
            lastRan = now;
            lastResult = func.apply(lastThis, lastArgs);
            return lastResult;
        }

        if (!timeoutId && trailing) {
            // 如果冷却期未过，且允许trailing执行，设置一个定时器在冷却期结束后执行
            timeoutId = setTimeout(() => {
                lastRan = Date.now(); // 更新执行时间
                timeoutId = null;
                lastResult = func.apply(lastThis, lastArgs);
            }, limit - (now - lastRan));
        }
        return lastResult;
    };

    throttled.cancel = function() { // 提供取消功能
        clearTimeout(timeoutId);
        lastRan = 0;
        timeoutId = null;
        lastArgs = null;
        lastThis = null;
    };

    return throttled;
}

// 示例用法：
const scrollContainer = document.getElementById('scroll-container');
if (scrollContainer) {
    // 默认行为：leading + trailing
    scrollContainer.addEventListener('scroll', throttle(function(event) {
        console.log('滚动中 (默认):', event.target.scrollTop);
        console.log('this指向:', this);
    }, 200));

    // 只在开始时执行一次 (leading: true, trailing: false)
    scrollContainer.addEventListener('mousemove', throttle(function(event) {
        console.log('鼠标移动 (leading only):', event.clientX);
    }, 100, { trailing: false }));

    // 只在冷却期结束后执行一次 (leading: false, trailing: true)
    scrollContainer.addEventListener('drag', throttle(function(event) {
        console.log('拖拽中 (trailing only):', event.clientX);
    }, 150, { leading: false }));
}

_.debounce

_.throttle