Javascript 用户离开窗口时setInterval未清除

我有一个我已经设计好的示例，它使用了几个

setTimeout

和

setInterval

实例。我发现如果用户离开页面，

setInterval

会出现问题

您可能会注意到，如果在该间隔运行时离开页面，则数字将继续永远递增。间隔基本上没有被清除。否则效果很好

下面是

setTimeout

中的

setInterval

实例之一的示例

setTimeout(function() {
  var x = parseInt($one.text());

  handle = setInterval(function() {
    if (x > -5) {
      x--;
      $one.html(x + 'px');
    }
    else {
      clearInterval(handle);
      handle = null;
    }
  }, 200);

  $box.animate({
    boxShadow: '-5px 0 0 0 #333'
  }, 2000);

}, 7000);

我已经尝试在if/else语句中添加

clearInterval（handle）

和

handle=null

，但是如果用户离开页面，我就无法清除间隔。是否有其他方法可以实现此

setInterval

？这只是一个javascript限制吗

更新

---

奇怪的是，当我记录

x

值时，控制台显示它正确显示了-1到-4的数字。

clearInterval

不是从另一个窗口运行吗？

您可以使用

setTimeout

代替

setInterval

如下：-

setTimeout(function() {
    var x = parseInt($one.text());
    function callOnTimeOut(){
        setTimeout(function() {
            if (x > -5) {
                x--;
                $one.html(x + 'px');
                callOnTimeOut();
            }
        }, 200);
    }
    callOnTimeOut();

    $box.animate({
        boxShadow: '-5px 0 0 0 #333'
    }, 2000);

}, 7000);

---

您可以使用

setTimeout

代替

setInterval

如下所示：

setTimeout(function() {
    var x = parseInt($one.text());
    function callOnTimeOut(){
        setTimeout(function() {
            if (x > -5) {
                x--;
                $one.html(x + 'px');
                callOnTimeOut();
            }
        }, 200);
    }
    callOnTimeOut();

    $box.animate({
        boxShadow: '-5px 0 0 0 #333'
    }, 2000);

}, 7000);

---

看看浏览器是如何处理非制表计时器的。iirc他们从不停止，他们只是放慢速度。@rlemon你说得对——“当选项卡处于非活动状态时，最多每秒调用一次函数。”来自。有趣的是作为旁注：当关闭选项卡时，requestAnimationFrame完全停止。我意识到这与这个问题无关，但很高兴知道：看看浏览器是如何处理非制表计时器的。iirc他们从不停止，他们只是放慢速度。@rlemon你说得对——“当选项卡处于非活动状态时，最多每秒调用一次函数。”来自。有趣的是作为旁注：当关闭选项卡时，requestAnimationFrame完全停止。我意识到这与这个问题无关，但很高兴知道：这就是关键。Chrome仍然会减慢设置间隔的速度，因此如果我离开屏幕，它必须赶上，但它不再溢出：-）谢谢@布莱恩菲利普斯很高兴我能帮上忙：）这就成功了。Chrome仍然会减慢设置间隔的速度，因此如果我离开屏幕，它必须赶上，但它不再溢出：-）谢谢@布莱恩菲利普斯很高兴我能帮忙：）