JavaScript:clear setInterval on blur和resume on focus

I have a very basic slideshow cycling some div containers. This is my code:

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);});

Then in my document.ready function, I'm calling the above with cycling = setInterval('cycle()', 5001);

When the page become inactive, the setInterval should clear, then resume when the page regains focus. This works correctly in Chrome, but not IE. I'm not really concerned about IE because it doesn't need to be cleared there.

In Firefox, with the above code, the div container just switches back and forth with each interval, or sometimes it slides to the left twice as far as it is supposed to.

When I remove the $(window).focus(function(){cycling = setInterval('cycle()', 5001);}); line, then it behaves correctly with the exception of that it does not resume when the page regains focus.

What is causing this and how do I resolve the issue?

#0

You are calling setInterval twice, once on focus and once on document ready. The blur handler only clears whichever of those happened second. So the cycle() function gets called twice as often as you expect.

One way to get around that is to initialise cycling to null, assign cycling = null in the blur handler, and then in the ready and focus handlers only create a new interval if cycling === null.

Another way is to only call setInterval from document ready and just leave it running forever (i.e. until the user navigates away from your page), but add an "infocus" flag that you set and clear from the focus and blur handlers:

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

Then check the flag:

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

   // rest of your code here...
}

推荐文章

使用php/mysql live search防止多个同时查询

使用php/mysql live search防止多个同时查询

推荐文章

在这个用例中应该使用哪种设计模式?

在这个用例中应该使用哪种设计模式?

推荐文章

编写一个servlet来添加/编辑/删除一个项以及一个列表项

编写一个servlet来添加/编辑/删除一个项以及一个列表项

推荐文章

如何根据datagridview中另一个组合框中的选定值填充datagridview中的组合框?

如何根据datagridview中另一个组合框中的选定值填充datagridview中的组合框?

推荐文章

hibernate正在选择中更新

hibernate正在选择中更新

推荐文章

在鼠标指针下获取窗口句柄,同时忽略半透明窗口

在鼠标指针下获取窗口句柄,同时忽略半透明窗口

推荐文章

使用xcode获取HTTP头

使用xcode获取HTTP头

推荐文章

我无法用存储在我的核心数据存储ios中的一系列图像设置数组

我无法用存储在我的核心数据存储ios中的一系列图像设置数组

推荐文章

如何在python shell中重新加载类?

如何在python shell中重新加载类?

推荐文章

如何将外部web服务中的分类内容集成到Joomla 1.5中?

如何将外部web服务中的分类内容集成到Joomla 1.5中?

推荐文章

AJAX不同步

AJAX不同步

推荐文章

将“defined”与“ifdef”一起使用?

将“defined”与“ifdef”一起使用?

推荐文章

Selenium 2中是否有WaitForText或WaitForElement方法?

Selenium 2中是否有WaitForText或WaitForElement方法?

推荐文章

在Eclipse中安装远程Tomcat服务器

在Eclipse中安装远程Tomcat服务器

推荐文章

需要vbscript帮助“奥谢尔·朗“命令

需要vbscript帮助“奥谢尔·朗“命令

推荐文章

如何将级数重新编号为平行集

如何将级数重新编号为平行集