切换标签时倒计时停止

分享于2022年07月17日 javascript 问答
【问题标题】:切换标签时倒计时停止(Countdown timer stops when switching tabs)
【发布时间】:2022-01-26 22:38:00
【问题描述】:

所以基本上当我切换标签时,特定页面上的倒数计时器会停止倒计时并在您返回标签时恢复。有没有办法缓解这种情况,以便它在后台计算或考虑您在另一个标签上花费的时间?

这基本上是我对 js 所拥有的:

document.getElementById('timer').innerHTML =
  05 + ":" + 01;
startTimer();


function startTimer() {
  var presentTime = document.getElementById('timer').innerHTML;
  var timeArray = presentTime.split(/[:]+/);
  var m = timeArray[0];
  var s = checkSecond((timeArray[1] - 1));
  if(s==59){m=m-1}
  if(m<0){
    return
  } else if (m == 0 && s == 0) {
    location.reload();
  }
  
  document.getElementById('timer').innerHTML =
    m + ":" + s;
  setTimeout(startTimer, 1000);
  
}

function checkSecond(sec) {
  if (sec < 10 && sec >= 0) {sec = "0" + sec};
  if (sec < 0) {sec = "59"};
  return sec;
}

任何想法是否可以在服务器端完成时间或不能在客户端修改时间?如果不是,那么无论如何,但主要只是想弄清楚如何使倒计时在另一个选项卡上仍然有效(或考虑所花费的时间)。

  • 切换标签永远不会停止运行的 JS。我检查了 Chrome 浏览器上的代码,倒数计时器即使在其他选项卡上也能正常工作。是什么让您认为它不起作用?

【解决方案1】:

我们可以全局存储变量 m s 值,也可以在设置内部 HTML 后使用本地存储设置值,并在每次制表时取回存储的值被切换为:

设定值:

window.localStorage.setItem('minutes', m.toString()); //same for the seconds

获取值:

window.localStorage.getItem('minutes'); //same for the seconds

希望这能回答您的问题。

  • 但是它是如何解决计时问题的呢?