如何用JavaScript/jQuery实现网页加载后自动计时及不活跃10秒判断

你提供的初始示例代码存在两个基础缺陷，无法达到预期效果：

• 缺少定时运行的逻辑，脚本加载时会直接读取time=0的初始值完成判断，不会随时间推移逐秒累加
• 判断逻辑如果直接放在循环中，会每秒重复触发弹窗，造成使用体验问题

需求适配的核心设计点 #

• 所有逻辑绑定在页面加载完成的生命周期上，全程不需要手动点击启动、结束按钮
• 计时从0开始，以1秒为间隔逐秒递增，无上限累计
• 内置页面不活跃状态识别，可判断不活跃状态的累计时长是否达到10秒阈值
• 按累计时长阈值触发对应弹窗，通过标记位避免重复弹出

可直接运行的完整代码 #

原生JavaScript实现版本（无需依赖jQuery）：

// 监听页面DOM完全加载事件，加载完成立刻启动逻辑，无手动交互
document.addEventListener('DOMContentLoaded', () => {
    let totalSeconds = 0; // 从0开始累计的运行时长，单位：秒
    let hasTriggeredOver10s = false; // 标记是否已经触发过超10秒的提示，避免重复弹窗
    let inactiveStartTime = null; // 记录页面进入不活跃状态的时间戳

    // 监听页面可见性变化，实现不活跃状态的时长判断
    document.addEventListener('visibilitychange', () => {
        if (document.hidden) {
            // 页面切到不活跃状态，记录进入时间
            inactiveStartTime = Date.now();
        } else {
            // 页面回到活跃状态，计算本次不活跃的时长
            const inactiveDuration = (Date.now() - inactiveStartTime) / 1000;
            console.log(`本次页面不活跃时长：${inactiveDuration}秒，是否超过10秒：${inactiveDuration >=10}`);
        }
    });

    // 每秒执行一次计时逻辑
    const countTimer = setInterval(() => {
        totalSeconds += 1;

        // 未触发超10秒提示时，按阈值判断弹窗
        if (!hasTriggeredOver10s) {
            if (totalSeconds <= 10) {
                alert('abc');
            } else {
                alert('xyz');
                hasTriggeredOver10s = true;
                // 触发完对应提示后清除定时器，减少资源占用
                clearInterval(countTimer);
            }
        }
    }, 1000); // 间隔1000ms即每秒执行一次
});

如果需要使用jQuery实现相同逻辑，只需要将DOM加载监听部分替换为jQuery的初始化方法，其余逻辑完全通用：

$(document).ready(function() {
    // 上述计时、可见性判断的逻辑可直接复用，无需修改
});

逻辑说明 #

• 无任何手动交互入口，DOM结构加载完成后自动启动计时流程，计数从0开始逐秒递增
• 内置不活跃状态判断能力：页面切到后台、最小化时自动记录进入时间，回到前台时可直接输出本次不活跃的累计时长，判断是否达到10秒阈值
• 通过标记位解决原代码重复弹窗的问题：累计时长≤10秒的阶段会触发对应abc提示，首次超过10秒时弹出一次xyz提示，之后自动停止计时，不会无意义占用浏览器资源

内容的提问来源于stack exchange，提问作者Jasbir