如何在切换浏览器标签页时暂停与恢复jQuery进度条？

没问题，咱们可以利用浏览器的Page Visibility API来检测标签页的可见状态，结合你用的progressTimer插件，轻松实现暂停/恢复的功能。下面是修改后的完整代码，我会给你拆解关键部分：

核心思路是借助浏览器原生API监听标签页状态，再配合进度条插件的控制方法，保存暂停时的进度状态，恢复时从断点继续。

关键逻辑梳理 #

• 用document.hidden属性判断当前标签页是否可见（兼容Chrome、Firefox、Edge等主流浏览器）
• 监听visibilitychange事件，在标签页隐藏/激活时触发暂停/恢复操作
• 保存进度条的剩余时间和运行状态，避免恢复时从头开始

修改后的完整代码 #

$(document).ready(function(){
    // 初始化变量保存进度条状态
    let progressTimerInstance = null;
    let remainingTime = 0;
    let isRunning = false;

    // 窗口加载完成3秒后启动进度条
    setTimeout(function(){
        $(".wait").hide();
        // 替换为你的PHP时间变量
        const totalTime = <?php echo $yourTimeValue; ?>;
        remainingTime = totalTime;
        
        // 初始化并启动进度条
        progressTimerInstance = $("#progressTimer").progressTimer({
            timeLimit: totalTime,
            onFinish: function() {
                // 进度条完成时的自定义操作，按需修改
                console.log("进度条已完成！");
                isRunning = false;
            }
        });
        isRunning = true;
    }, 3000);

    // 监听标签页可见性变化
    document.addEventListener("visibilitychange", function() {
        // 进度条未初始化或已结束时，不执行操作
        if (!progressTimerInstance || !isRunning) return;

        if (document.hidden) {
            // 标签页隐藏：暂停进度条并保存剩余时间
            remainingTime = progressTimerInstance.getTimeRemaining();
            progressTimerInstance.stop();
            isRunning = false;
        } else {
            // 标签页激活：用剩余时间重新启动进度条
            progressTimerInstance = $("#progressTimer").progressTimer({
                timeLimit: remainingTime,
                onFinish: function() {
                    console.log("进度条已完成！");
                    isRunning = false;
                }
            });
            isRunning = true;
        }
    });
});

代码细节说明 #

1. 状态变量：

   • progressTimerInstance：保存进度条实例，方便调用插件的stop()和getTimeRemaining()方法
   • remainingTime：记录暂停时的剩余时长，恢复进度条时用这个值作为新的时间上限
   • isRunning：标记进度条当前是否在运行，避免重复执行暂停/恢复操作

2. 标签页监听：

   • visibilitychange是浏览器原生事件，当用户切换标签页、最小化浏览器时都会触发
   • 标签页隐藏时，先获取剩余时间再暂停进度条；重新激活时，用保存的剩余时间重启进度条，保证从暂停点继续

3. 注意事项：

   • 确保你使用的progressTimer插件支持getTimeRemaining()和stop()方法（主流jQuery进度条插件基本都提供这些API）
   • 如果你的插件没有这些方法，可以通过直接操作进度条DOM的宽度或内部计时器来实现类似逻辑，核心思路不变

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