当前位置：首页 > news >正文

通用节流函数

news 来源：原创 2025/5/18 16:36:04

节流函数的作用是在指定的时间间隔内只允许目标函数执行一次，从而限制函数的调用频率。

节流函数的核心思想：

在事件触发时，记录当前时间。
如果距离上一次函数执行的时间间隔小于设定的时间，则忽略此次触发。
如果时间间隔足够长，则执行目标函数，并更新上次执行的时间。

节流函数的实现：

以下是一个常见的节流函数实现：

function throttle(fn, limit = 1000) {
    let lastCall = 0; // 记录上一次函数执行的时间
    return function (...args) {
        const now = new Date().getTime(); // 获取当前时间
        if (now - lastCall >= limit) { // 如果距离上次执行已经超过限制时间
            lastCall = now; // 更新最后一次执行的时间
            fn.apply(this, args); // 执行目标函数
        }
    };
}

示例 1：滚动事件节流

// 定义一个目标函数
function handleScroll() {
    console.log('页面滚动了！');
}

// 创建节流函数
const throttledScroll = throttle(handleScroll, 500);

// 绑定滚动事件
window.addEventListener('scroll', throttledScroll);

在这个例子中，handleScroll 函数只会每 500 毫秒最多执行一次，即使用户快速滚动页面。

示例 2：按钮点击节流

// 定义一个目标函数
function handleClick() {
    console.log('按钮被点击了！');
}

// 创建节流函数
const throttledClick = throttle(handleClick, 2000);

// 绑定点击事件
document.querySelector('#myButton').addEventListener('click', throttledClick);

在这个例子中，即使用户快速多次点击按钮，handleClick 函数也只会每 2 秒最多执行一次。

防抖 vs 节流的区别总结：

特性	防抖（Debounce）	节流（Throttle）
定义	在指定时间内，只有最后一次触发才会执行函数。	在指定时间内，函数最多执行一次。
适用场景	输入框搜索、窗口调整大小等需要等待的操作。	滚动事件、鼠标移动等需要控制频率的操作。
执行次数	在触发事件停止后执行一次。	在触发事件期间，按固定间隔执行多次。

节流的其他实现方式：

除了基于时间戳的实现，节流还可以通过定时器来实现。以下是基于定时器的节流函数实现：

function throttle(fn, limit = 1000) {
    let timeoutId; // 用于存储定时器的 ID
    return function (...args) {
        if (!timeoutId) { // 如果没有定时器在运行
            timeoutId = setTimeout(() => {
                fn.apply(this, args); // 执行目标函数
                timeoutId = null; // 清空定时器
            }, limit);
        }
    };
}