如何解决setInterval 与页面切换问题

setInterval 与页面切换问题

今天遇到的问题是我用好几个setInterval定时器来做模拟系统的动态表示，当打开页面时，程序能够正常运行，效果正常，但是当我切换到其他页面，过段时间再切回到系统的页面时，动画出现了错乱，不是按原来安排的运行。查了资料后，发现这是因为浏览器本着节省内存的性质，当切换到其他页面时，采油系统页面的定时器不运动，但是动画依然排列，当切换回来的时候，动画加速运动，出现错误，在轮播图之类的页面经常会发生这样的情况。

解决方案

我查了一部分资料，网上一般都是说如何在关闭页面的时候调用函数，比如用onbeforeunload和Onunload，但是我主要是在切换的时候出的问题，查了一上午，终于找到了监听页面切换的函数：如下所示：

var hiddenProperty = 'hidden' in document ? 'hidden' :    
    'webkitHidden' in document ? 'webkitHidden' :    
    'mozHidden' in document ? 'mozHidden' :    
    null;
var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
var onVisibilityChange = function(){
    if (!document[hiddenProperty]) {    
        console.log('页面非激活');
    }else{
        console.log('页面激活')
    }
}
document.addEventListener(visibilityChangeEvent, onVisibilityChange);

当切换到其他页面时，控制台输出页面激活，切回来的时候，显示页面未激活，为了明确一点，我把上面代码改成

var onVisibilityChange = function(){
    if (!document[hiddenProperty]) {    
        console.log('切回');
    }else{
        console.log('切走')
    }
}

这里我在’切走’部分，写入clearInterval()，发现没有作用，在一会切换回来的时候依然会出现错乱。很难受。
今天到这里之后继续查找，测试，找到一篇博客上写到是两种方法：
方案1：如果您使用的是jQuery，在jq版本里每次在animate前加上 $(obj).stop(true,true); 可以解决（可是我用的不是jQuery，）

setInterval(function(){
    $(".notice").show();
    $(".notice ul").stop(true,true).animate({"top":"-20px"},function(){
        var node = $(".notice ul li:eq(0)").remove();
        $(".notice ul").append(node);
                    $(".notice ul").css("top","0");
    });
},3500);

方案2：通过浏览器的焦点去执行该js（这个我测试过，在切换的时候并不能调用，很伤心）

var timer=null;
window .onfocus=function(){
    timer=setInterval(autoRun,1000);
}

window.onblur=function(){
    clearInterval(timer);
}

于是在这里我想用最上面写的函数来代替onfocus 和 onblur ，如下所示：

var hiddenProperty = 'hidden' in document ? 'hidden' :    
    'webkitHidden' in document ? 'webkitHidden' :    
    'mozHidden' in document ? 'mozHidden' :    
    null;
var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
var onVisibilityChange = function(){
    if (!document[hiddenProperty]) {    
        console.log('页面非激活');
        var timer=null;
        timer=setInterval(autoRun,1000);    
    }else{
        console.log('页面激活');
         clearInterval(timer);       
    }
}
document.addEventListener(visibilityChangeEvent, onVisibilityChange);

但是结果还是不对，显示autoRun is not defined，之前没有这个问题，估计是前面切换的时候并没有调用。
这篇文章虽然没有解决我的问题，但是希望能解决其他人的问题，同时也希望有大佬来告诉这个问题怎么办？