如何解決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，之前沒有這個問題，估計是前面切換的時候並沒有呼叫。
這篇文章雖然沒有解決我的問題，但是希望能解決其他人的問題，同時也希望有大佬來告訴這個問題怎麼辦？