用户离开选项卡时暂停的setInterval（）？

Question

javascript中是否有类似setInterval（）的方法，在用户离开选项卡时停止，在用户再次进入选项卡时恢复？

Answer 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>