javascript - 使用 Javascript 离开窗口时如何暂停 setTimeout？

Question

我的项目中有几个 setTimeout 函数，每个函数都有一个 setInterval。

根据我的经验，当我离开窗口时 setInterval 会停止，但是 setTimeout 不会停止计算秒数。

是否可以在有人离开当前窗口(切换到另一个窗口)时暂停 setTimeout 的计时器并在他返回时继续？如果是，如何？

这是我设法创建的代表我的问题的代码:

// find elements
var banner = $("#banner-message")
var banner2 = $("#banner-message2")
var banner3 = $("#banner-message3")
var num = 0;
var num2 = 0;
var num3 = 0;

var i1 = setInterval(function() {
	num++;
  $(banner).text(num);
  if (num >= 100)
  {
  	clearInterval(i1);
  }
}, 50);

setTimeout(function()
{
	var i2 = setInterval(function() {
    num2++;
    $(banner2).text(num2);
    if (num2 >= 100)
    {
      clearInterval(i2);
    }
  }, 50);
}, 5500);

setTimeout(function()
{
	var i3 = setInterval(function() {
    num3++;
    $(banner3).text(num3);
    if (num3 >= 100)
    {
      clearInterval(i3);
    }
  }, 50);
}, 11000);

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}


#banner-message2 {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}


#banner-message3 {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  0
</div>

<div id="banner-message2">
  0
</div>

<div id="banner-message3">
  0
</div>

Answer 1

您可以使用事件监听器 visibilitychange 来观察选项卡何时失去焦点。当可见性发生变化时，您可以使用 document.hidden 查看文档是否隐藏。如果是，则可以清除超时。当它重新获得焦点时，您可以调用 setTimeout 来恢复功能。

let myTimeout = null

function timeoutfunction() { 
  console.log('timeout called')
  myTimeout = setTimeout(timeoutfunction, 1000)
}

function onVisibilityChanged() {
  if (document.hidden || document.mozHidden || document.webkitHidden || document.msHidden) {
    // The tab has lost focus
    clearTimeout(myTimeout)
  } else {
    // The tab has gained focus
    myTimeout = setTimeout(timeoutfunction, 1000)
  }
}

document.addEventListener("visibilitychange", onVisibilityChanged, false);
document.addEventListener("mozvisibilitychange", onVisibilityChanged, false);
document.addEventListener("webkitvisibilitychange", onVisibilityChanged, false);
document.addEventListener("msvisibilitychange", onVisibilityChanged, false);