Question

我有codepen demo我使用了setTimeout和setInterval的多个实例。如果用户离开页面，我发现setInterval存在问题。

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

以下是setInterval中setTimeout的其中一个实例的示例。

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是否无法从其他窗口运行？

Answer 1

您可以使用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);

用户离开窗口时setInterval不清除

1 个答案: