js debounce or throttle

在JavaScript中，防抖（debounce）和节流（throttle）是两种常用的优化策略，用于处理高频触发的事件，如窗口的resize、scroll事件，或者用户输入时的实时搜索。它们的主要目的是减少函数的执行次数，从而提高性能和用户体验。

防抖（Debounce）

防抖是指在某个时间段内，只执行最后一次触发的函数调用。如果在这个时间段内再次触发该函数，会重新计时，直到等待时间结束才会执行函数。防抖常用于以下场景：

• 搜索框实时搜索
• 窗口调整大小时的事件处理
• 按钮点击事件

实现防抖的代码示例：

function debounce(fn, delay = 100) {
    let time = null;

    return function (...args) {
        clearTimeout(time);

        time = setTimeout(() => {
            fn.apply(this, args);
        }, delay);
    };
}

节流（Throttle）

节流是指在一段时间内限制函数的执行频率，保证一定时间内只执行一次函数调用。节流常用于以下场景：

• 滚动事件
• 鼠标移动事件
• 窗口调整大小时的事件处理

实现节流的代码示例：

function throttle(fn, interval = 100) {
    let lastTime = 0;
    return function(...args) {
        const now = new Date();
        if (now - lastTime >= interval) {
            fn.apply(this, args);
            lastTime = now;
        }
    };
}