手写简单的节流函数

52 阅读1分钟
function throttle(fn, wait) {
    let preTime = null;
    return function (...args) {
        let nowTime = Date.now();
        if (!preTime || nowTime - preTime > wait) { // 检查 preTime 是否为 null 或时间间隔是否超过 wait
            fn.call(this, ...args);
            preTime = nowTime; // 更新 preTime
        }
    };
}

测试代码:

以下是一个简单的测试代码,用于验证节流函数是否正常工作:

function logMessage(message) {
    console.log(`${message} - ${Date.now()}`);
}

const throttledLog = throttle(logMessage, 1000);

// 测试
setInterval(() => {
    throttledLog("Throttled message");
}, 200); // 每 200ms 触发一次,但节流函数会限制为每 1000ms 执行一次

输出结果:

每隔 1000ms 输出一次 "Throttled message",而不是每次触发都输出。

说明:

这种节流实现方式是基于时间戳的,它会在每次触发事件时检查时间间隔是否超过指定的 wait 时间。如果超过,则执行函数并更新时间戳。这种方式适用于大多数场景,但如果你需要更复杂的节流行为(例如在最后一次触发时延迟执行),可以考虑使用定时器实现节流。