设置间隔不清除用户离开窗口

setInterval not clearing when user leaves window

本文关键字：用户 离开 开窗口 清除 设置      更新时间：2023-09-26

我有一个我制作的代码笔演示，它使用了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);
相关文章：