Web页面用户活动时间高效追踪：基于事件去抖动的JavaScript实现

let activityTimeout;
let lastActivityTimestamp = Date.now(); // 页面加载时或上次数据发送后的活动起始时间
let accumulatedActiveTime = 0; // 累积的活跃时间（毫秒）
const DEBOUNCE_DELAY = 5000; // 5秒，可根据需求调整

/**
 * 更新活跃时间并重置去抖动定时器。
 * 每次检测到用户活动时调用。
 */
function updateAndResetTimer() {
    clearTimeout(activityTimeout); // 清除之前的定时器

    // 计算自上次活动或页面加载以来经过的活跃时间，并累加
    const currentTime = Date.now();
    accumulatedActiveTime += (currentTime - lastActivityTimestamp);
    lastActivityTimestamp = currentTime; // 更新上次活动时间戳

    // 设置新的定时器，如果在DEBOUNCE_DELAY时间内没有新的活动，则发送数据
    activityTimeout = setTimeout(sendAccumulatedData, DEBOUNCE_DELAY);
}

/**
 * 发送累积的活跃时间数据到后端。
 * 仅在去抖动定时器触发（即用户停止活动）时调用。
 */
function sendAccumulatedData() {
    // 确保将从上次活动到定时器触发期间的最后一段活跃时间也计算在内
    accumulatedActiveTime += (Date.now() - lastActivityTimestamp);
    lastActivityTimestamp = Date.now(); // 更新时间戳，标记为本次数据发送的时间点

    console.log(`用户已停止活动。正在发送累积活跃时间：${accumulatedActiveTime}ms，页面：${window.location.pathname}`);

    // TODO: 在这里执行你的AJAX请求，将数据发送到后端
    // 示例使用 Fetch API:
    /*
    fetch('/api/track-activity', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            page: window.location.pathname,
            duration: accumulatedActiveTime // 发送累积的活跃时间
        })
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        console.log('活动数据发送成功:', data);
        // 根据需求，可以选择在成功发送后重置 accumulatedActiveTime
        // 例如：accumulatedActiveTime = 0; 如果你希望发送的是增量活跃时间
        // 但如果目标是追踪总活跃时间，则不应重置。本教程假设追踪总活跃时间。
    })
    .catch(error => {
        console.error('发送活动数据失败:', error);
    });
    */

    // 假设我们追踪的是当前页面会话的总活跃时间，因此不在此处重置 accumulatedActiveTime
    // 如果用户再次活跃，它将继续累