高效追踪用户页面活跃时间并优化数据上报策略

let activityTimeout; // 用于存储计时器ID
const INACTIVITY_THRESHOLD = 5000; // 5秒不活动则认为停止

// 记录活跃时间相关变量
let totalActiveTime = 0; // 总活跃时间（毫秒）
let lastActivityTime = Date.now(); // 上次活动发生的时间戳
let intervalId = null; // 用于累积活跃时间的定时器ID

/**
 * 启动活跃时间累积计时器
 */
function startActivityAccumulator() {
    if (intervalId === null) {
        intervalId = setInterval(() => {
            const now = Date.now();
            // 假设每秒检查一次，累加活跃时间
            // 实际中可以根据需要调整累加逻辑
            totalActiveTime += (now - lastActivityTime);
            lastActivityTime = now;
            // console.log(`当前总活跃时间: ${totalActiveTime / 1000} 秒`);
        }, 1000); // 每秒累积一次
    }
}

/**
 * 停止活跃时间累积计时器
 */
function stopActivityAccumulator() {
    if (intervalId !== null) {
        clearInterval(intervalId);
        intervalId = null;
    }
}

/**
 * 处理用户活动事件
 */
function handleUserActivity() {
    // 每次活动时，更新上次活动时间
    lastActivityTime = Date.now();

    // 清除之前的停止活动计时器
    clearTimeout(activityTimeout);

    // 重新启动活跃时间累积
    startActivityAccumulator();

    // 设置新的停止活动计时器
    activityTimeout = setTimeout(() => {
        console.log('用户停止活动，准备发送数据...');
        // 停止活跃时间累积
        stopActivityAccumulator();

        // 在这里执行 AJAX 请求，发送累积的 totalActiveTime
        // 示例：sendAnalyticsData(totalActiveTime);
        console.log(`最终上报总活跃时间: ${totalActiveTime / 1000} 秒`);

        // 重置活跃时间，为下一次活跃周期做准备
        totalActiveTime = 0;
        lastActivityTime = Date.now();

    }, INACTIVITY_THRESHOLD);
}

// 监听相关用户交互事件
document.addEventListener('mousemove', handleUserActivity);
document.addEventListener('keydown', handleUserActivity);
document.addEventListener('scroll', handleUserActivity);
document.addEventListener('click', handleUserActivity);
document.addEventListener('touchstart', handleUserActivity); // 移动端触屏事件

// 页面加载时立即启动活跃时间累积
handleUserActivity(); // 模拟页面加载即视为一次活动

document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'hidden') {
        // 页面不可见时，停止累积活跃时间，并立即发送当前已累积的数据
        stopActivityAccumulator();
        clearTimeout(activityTimeout); // 清除可能存在的停止活动计时器
        // 立即发送当前 totalActiveTime
        if (totalActiveTime > 0) {
            console.log(`页面隐藏，立即上报总活跃时间: ${totalActiveTime / 1000} 秒`);
            // sendAnalyticsData(totalActiveTime);
            totalActiveTime = 0; // 重置
        }
    } else {
        // 页面重新可见时，重新开始追踪
        lastActivityTime = Date.now();
        handleUserActivity(); // 模拟一次活动，重新启动计时器
    }
});

window.addEventListener('beforeunload', () => {
    // 确保在页面卸载前发送所有未上报的活跃时间
    stopActivityAccumulator();
    clearTimeout(activityTimeout);

    if (totalActiveTime > 0) {
        console.log(`页面卸载，上报最终总活跃时间: ${totalActiveTime / 1000} 秒`);
        // 使用 navigator.sendBeacon 或同步 AJAX 请求确保数据发送
        // navigator.sendBeacon('/api/analytics', JSON.stringify({ activeTime: totalActiveTime }));
    }
});