Javascript 仅当选项卡处于活动状态时运行setTimeout

是否有方法停止设置超时（“myfunction（）”，10000）从计数开始。比如说,

用户到达“某个页面”并在那里停留2000毫秒

用户转到另一个选项卡，使“某个页面”保持打开状态

myfunction（）

在它们返回8000毫秒后才会启动

---

你需要做的是建立一种机制，以小的间隔设置超时，跟踪总的运行时间。您还可以在整个页面上跟踪“mouseenter”和“mouseleave”（代码）。当短期超时过期时，他们可以检查窗口状态（in或out），并且在窗口未处于焦点时不会重新启动进程。“mouseenter”处理程序将启动所有暂停的计时器

---

编辑-@Šime Vidas发布了一个很好的示例。

您可以执行以下操作：

$([window, document]).blur(function() {
  // Clear timeout here
}).focus(function() {
  // start timeout back up here
});

窗口用于IE，文档用于浏览器世界的其他部分。

（函数（）{
(function() {
  var time = 10000,
      delta = 100,
      tid;

  tid = setInterval(function() {
    if ( document.hidden ) { return; }    
    time -= delta;
    if ( time <= 0 ) {
      clearInterval(tid);
      myFunction(); // time passed - do your work
    }        
  }, delta);
})();

var时间=10000，
δ=100，
工业贸易署；
tid=setInterval（函数（）{
if（document.hidden）{return；}
时间-=增量；
if（timeŠime Vidas的回答很好，它帮助我编写了自己的代码。为了完整起见，我举了一个例子，说明如果您想使用setTimeout而不是setInterval：

(function() {

    function myFunction() {
        if(window.blurred) {
            setTimeout(myFunction, 100);
            return;
        }

        // What you normally want to happen

        setTimeout(myFunction, 10000);
    };
    setTimeout(myFunction, 10000);

    window.onblur = function() {window.blurred = true;};
    window.onfocus = function() {window.blurred = false;};

})();

您将看到窗口模糊检查设置的时间比正常设置的时间短，因此您可以根据窗口重新聚焦时需要运行函数其余部分的时间来设置该时间。
我使用的方法与滑块中的实时视频几乎相同
但是我的代码基于
文档。visibilityState
进行页面可见性检查：

document.addEventListener("visibilitychange", () => {

  if ( document.visibilityState === "visible" ) {

    slideshow.play();

  } else {

    slideshow.pause();
  }
});


关于页面可见性
API:
我终于实现了@Šime Vidas'答案的一个变体，因为如果我打开另一个程序，浏览器窗口不可见，间隔仍然在运行，但执行间隔的页面是活动的浏览器选项卡。因此，我将条件修改为
document.hidden | | document.hasFocus（）
。这样，如果文档被隐藏或文档没有焦点，interval函数就会返回

(function() {
  var time = 10000,
      delta = 100,
      tid;

  tid = setInterval(function() {
    if ( document.hidden || !document.hasFocus() ) { return; }    
    time -= delta;
    if ( time <= 0 ) {
      clearInterval(tid);
      myFunction(); // time passed - do your work
    }        
  }, delta);
})();

（函数（）{
var时间=10000，
δ=100，
工业贸易署；
tid=setInterval（函数（）{
if（document.hidden | |！document.hasFocus（））{return；}
时间-=增量；
如果（时间）感谢您的回复。我使用了另一个，因为它满足了所有要求。但是关于这一个，我在
$（窗口）中获得了更大的成功
作为所有浏览器的对象。除非我遗漏了什么，否则在任何用户交互（如单击页面）之前，它不会在初始页面加载时运行setInterval函数，因为
onfocus
事件似乎不会在初始页面加载时触发。@torazaburo最初，
窗口。fuzzle
将是
未定义的
>这与
false
相同。因此，计时器开始自动倒计时。请注意
setInterval
如何立即执行-它不会等待焦点或模糊出现。您可以使用document.hidden：这在我的Chrome 74.0.3729.169中不起作用。即使我没有在r中聚焦，计时器也会完成Reliant tab（尽管时间要慢得多）@GeorgeVasilopoulos我已经更新了代码和演示。如果仍然不能按预期工作，请告诉我。