当用户不在当前标签页中时，倒数计时将停止

问题描述

我使用“倒置”进度条创建一个简单的倒计时-控制网站中的会话。

时间到了，页面将被重新加载，并且没有会话-被阻止。

问题： 进度条可以正常工作-但如果用户更改窗口或当前选项卡-并且“忘记”了打开的页面-倒数计时将停止。我不知道为什么

代码：

function progress(timeleft,timetotal,$element) {
    var progressBarWidth = timeleft * $element.width() / timetotal;
    $element.find('div').animate({ width: progressBarWidth },timeleft == timetotal ? 0 : 1000,"linear");
    if(timeleft > 0) {
        setTimeout(function() {
            progress(timeleft - 1,$element);
        },1000);
    }
};

progress(30,30,$('#progressBar'));

#progressBar {
  width: 90%;
  margin: 10px auto;
  height: 2px;
  background-color: #E0E0E0;
}

#progressBar div {
  height: 100%;
  text-align: right;
  padding: 0 0px;
  line-height: 2px;
  width: 0;
  background-color: #FF0000;
  box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="progressBar">
  <div class="bar"></div>
</div>

JSFIDDLE：https://jsfiddle.net/2tonbd5k

有什么办法解决这个问题吗？

我认为我需要将固定的“ timeleft或timetotal”（+ 3Min）更改为“实时”（用户在21:57:00访问该站点，然后重新加载的“实时”将为+ 3分钟-22:00:00 PM）。如果用户外出，动画也会停止-但当他返回时，js会实时校正。我可以使用ASP更新“时间”-但是我该怎么做？

**出于测试目的，代码中的剩余时间仅为30s。

解决方法

你只需要添加这个脚本

if ( document.hidden ) { return; }

结果在这里 https://jsfiddle.net/mfkLea7w/