setInterval() 在用户离开选项卡时暂停？答案

【问题标题】：setInterval() that pauses when user leaves the tab?setInterval() 在用户离开选项卡时暂停？
【发布时间】：2015-05-05 21:38:49
【问题描述】：

javascript 中是否有任何方法可以像 setInterval() 一样在用户离开选项卡时停止并在用户再次进入选项卡时恢复？

【问题讨论】：

感谢大卫的提问，但我认为重复的问题可以很好地满足您的需求！
@Bergi 另一个问题是当标签不活动时浏览器对原生setInterval 做了什么。 This question is about an emulation of setInterval that forces a pause when the tab becomes inactive.它们不是重复的。

标签： javascript

【解决方案1】：

您可以创建自己的 API，使用 Visibility API 检测选项卡何时可见或隐藏，并在后台调用原生 setInterval 和 clearInterval。

var mySetInterval, myClearInterval;
(function() {
  var data = Object.create(null),
      id = 0;
  mySetInterval = function mySetInterval(func, time) {
    data[id] = {
      nativeID: setInterval(func, time),
      func: func,
      time: time
    };
    return id++;
  };
  myClearInterval = function myClearInterval(id) {
    if(data[id]) {
      clearInterval(data[id].nativeID);
      delete data[id];
    }
  };
  document.addEventListener('visibilitychange', function() {
    if(document.visibilityState == 'visible')
      for(var id in data)
        data[id].nativeID = setInterval(data[id].func, data[id].time);
    else
      for(var id in data)
        clearInterval(data[id].nativeID);
  });
})();

var mySetInterval, myClearInterval;
(function() {
  var data = Object.create(null),
      id = 0;
  mySetInterval = function mySetInterval(func, time) {
    data[id] = {
      nativeID: setInterval(func, time),
      func: func,
      time: time
    };
    return id++;
  };
  myClearInterval = function myClearInterval(id) {
    if(data[id]) {
      clearInterval(data[id].nativeID);
      delete data[id];
    }
  };
  document.addEventListener('visibilitychange', function() {
    if(document.visibilityState == 'visible')
      for(var id in data)
        data[id].nativeID = setInterval(data[id].func, data[id].time);
    else
      for(var id in data)
        clearInterval(data[id].nativeID);
  });
})();

var log = document.getElementById('log'),
    timer;
document.getElementById('start').onclick = function() {
  var num = 0;
  myClearInterval(timer);
  timer = mySetInterval(function(){
    log.innerHTML = num++;
  }, 1e3);
};

<input id="start" type="button" value="Start" />
<span id="log"></span>

请注意，上述 API 不应与本机 API 混合使用，例如不要尝试使用mySetInterval 创建并使用clearInterval 清除。因此，mySetInterval 返回的 ID 故意与原生 ID 不同。

【讨论】：