Question

我有一个非常基本的幻灯片循环一些div容器。这是我的代码：

function cycle(){
    var $first = $('.panes .pane1');
    var $active = $('.panes .active');
    var $next = $active.next();
    if($next.length != 0){
        $active.removeClass('active').addClass('inactive');
        $('.panes').animate({left: "-=430px"}, 400);
        setTimeout(function(){
            $next.removeClass('inactive').addClass('active');
        }, 400);
    } else {
        $active.removeClass('active').addClass('inactive');
        $('.panes').animate({left: "0px"}, 400);
        setTimeout(function(){
            $first.removeClass('inactive').addClass('active');
        }, 400);
    }

}

$(window).blur(function(){window.clearInterval(cycling)});
$(window).focus(function(){cycling = setInterval('cycle()', 5001);});

然后在我的document.ready函数中，我用cycling = setInterval('cycle()', 5001);

调用上面的内容

当页面变为非活动状态时，setInterval应该清除，然后在页面重新获得焦点时恢复。这在Chrome中正常运行，但不适用于IE。我并不是真的关心IE，因为它不需要在那里被清除。

在Firefox中，使用上面的代码，div容器只是每隔一段时间来回切换，或者有时它向左滑动两次。

当我删除$(window).focus(function(){cycling = setInterval('cycle()', 5001);});行时，它的行为正常，但页面重新获得焦点时不会恢复。

导致此问题的原因以及如何解决此问题？

Answer 1

您正在调用setInterval两次，一次是焦点，一次是文档就绪。模糊处理程序仅清除第二个发生的那个。所以cycle（）函数的调用次数是你预期的两倍。

解决这个问题的一种方法是将循环初始化为null，在blur处理程序中指定cycling = null，然后在ready和focus处理程序中，如果循环=== null，则只创建一个新的间隔。

另一种方法是只从文档就绪调用setInterval并让它永远运行（即直到用户离开你的页面），但是添加一个“infocus”标志，你可以从焦点和模糊处理程序中设置和清除它：

var infocus = false;
$(window).focus(function(){ infocus = true; })
        .blur(function (){ infocus = false; });

然后检查标志：

function cycle() {
   if (!infocus)
      return;

   // rest of your code here...
}

JavaScript：清除模糊的setInterval，并在焦点上恢复

1 个答案: