防抖与节流的区别：

虽然防抖和节流都是优化高频率事件的方法，但它们有不同的侧重点：

防抖（Debouncing）：在特定时间内只执行一次函数，时间段内的重复调用会重新计时。适用于搜索输入、窗口调整大小等事件。

节流（Throttling）：限制函数在特定时间内执行的次数。适用于滚动事件、鼠标移动等。

<script>
    function debounce(func, wait) {
        let timeout;

        return function (...args) {
            const context = this;

            clearTimeout(timeout);

            timeout = setTimeout(() => {
                func.apply(context, args);
            }, wait);
        };
    }

    // 定义需要防抖的函数
    function handleResize() {
        console.log('Window resized');
    }

    // 创建防抖函数，设置等待时间为 300 毫秒
    const debouncedResize = debounce(handleResize, 300);

    // 添加事件监听器
    window.addEventListener('resize', debouncedResize);


    // 定义需要防抖的函数
    function handleInput(event) {
        console.log('Input value:', event.target.value);
    }

    // 创建防抖函数，设置等待时间为 500 毫秒
    const debouncedInput = debounce(handleInput, 500);

    // 添加事件监听器
    // const inputElement = document.querySelector('input');
    // inputElement.addEventListener('input', debouncedInput);

    // 节流函数实现
    function throttle(func, wait) {
        let timeout;
        let lastRun = 0;

        return function (...args) {
            const context = this;
            const now = Date.now();

            if (now - lastRun >= wait) {
                lastRun = now;
                func.apply(context, args);
            } else {
                clearTimeout(timeout);
                timeout = setTimeout(() => {
                    lastRun = Date.now();
                    func.apply(context, args);
                }, wait - (now - lastRun));
            }
        };
    }

    // 节流函数使用示例

    // 定义需要节流的函数
    function handleScroll() {
        console.log('Scrolled');
    }

    // 创建节流函数，设置等待时间为 200 毫秒
    const throttledScroll = throttle(handleScroll, 200);

    // 添加事件监听器
    window.addEventListener('scroll', throttledScroll);


</script>