javascript - 当用户离开选项卡时暂停的 setInterval()？

Question

javascript 中是否有任何方法的行为类似于 setInterval() 并且会在用户离开选项卡时停止并在用户再次进入选项卡时恢复？

Answer 1

您可以创建自己的 API，使用 Visibility API检测选项卡何时可见或隐藏，并在后台调用 native 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 不应与 native API 混合使用，例如不要尝试使用 mySetInterval 创建并使用 clearInterval 清除。因此，mySetInterval 返回的 ID 故意与 native ID 不同。