节流实现js

节流实现方法

节流（throttle）是一种限制函数执行频率的技术，确保函数在指定时间间隔内只执行一次。以下是几种常见的实现方式：

使用时间戳实现

function throttle(func, delay) {
    let lastTime = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastTime >= delay) {
            func.apply(this, args);
            lastTime = now;
        }
    };
}

使用定时器实现

function throttle(func, delay) {
    let timer = null;
    return function(...args) {
        if (!timer) {
            timer = setTimeout(() => {
                func.apply(this, args);
                timer = null;
            }, delay);
        }
    };
}

结合时间戳和定时器实现

function throttle(func, delay) {
    let lastTime = 0;
    let timer = null;
    return function(...args) {
        const now = Date.now();
        const remaining = delay - (now - lastTime);
        if (remaining <= 0) {
            if (timer) {
                clearTimeout(timer);
                timer = null;
            }
            func.apply(this, args);
            lastTime = now;
        } else if (!timer) {
            timer = setTimeout(() => {
                func.apply(this, args);
                timer = null;
                lastTime = Date.now();
            }, remaining);
        }
    };
}

使用场景

• 滚动事件监听：防止滚动事件频繁触发导致性能问题。
• 窗口大小调整：限制窗口大小调整时的回调频率。
• 按钮点击：防止用户快速多次点击按钮导致重复提交。

注意事项

• 确保节流函数的上下文（this）和参数正确传递。
• 根据实际需求选择合适的时间间隔（delay）。
• 结合防抖（debounce）技术可以进一步优化高频事件的性能。