setInerval實現圖片滾動離開頁面後又返回頁面時圖片加速滾動問題解決

問題：

setInerval實現圖片滾動，離開頁面後又返回頁面時圖片加速滾動

代碼本身實現方案：

在每次頁面載入的時候會清除定時器。

問題產生原因：

由於在載入了圖片滾動的頁面之後，又去到了其他頁面，但是定時器沒有停止，而頁面又沒有顯示在用戶面前，當返回頁面的時候，就會把之前定時器中已經移動的圖片動畫一股腦移動，就會出現如題所述加速滾動的效果。

解決辦法：

監聽頁面是否顯示在用戶面前，是：重新走定時器方法，否，清除定時器。

以下判斷頁面是否展示的方法，在安卓5.0 等低版本系統下不生效。

function bannerScroll() {
    let imageBox = document.getElementById("imageBox");
    imageBox.classList.remove('roll-animation-3');
    imageBox.classList.remove('roll-animation-2');
    imageBox.classList.remove('roll-animation-1');
    const bodyWidth = document.body.clientWidth;
    const bodyHeight = document.body.clientHeight;
    const v1 = ((320 / 250) + (320 / 90)) / 2; //320*250尺寸比邊界值
    const ratio = bodyWidth / bodyHeight;
    let leftImage = new Image();
    leftImage.src = window.campaign.image_url;
    let leftImageWidth = "";
    let leftImageHeight = "";
    let adLeft = document.getElementById("adLeft");
    leftImage.onload = function () {
        leftImageWidth = leftImage.width;
        leftImageHeight = leftImage.height;
        let imageRealHeight = adLeft.offsetWidth * (leftImageHeight / leftImageWidth);
        // 設置所有圖片的高度相同，否則會出現圖片拼接不居中問題
        let imageItem = Array.from(document.getElementsByClassName('image-item'));
        for(let item of imageItem){
            item.style.height = imageRealHeight+'px';
        }
        if (ratio < v1) {  //  適配 320*250 設計圖樣式,停留3s
            slider(imageRealHeight, 4000, "roll-animation-1")
        } else {  // 不停留，直接滾動，1s速度跟css 動畫速度保持一致
            slider(imageRealHeight, 3000, "roll-animation-3")
        }
    }
}
var scrollTimer ;// 定義banner滾動定時器
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
    hidden = "hidden";
    visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
}

function handleVisibilityChange() {
    if (document[hidden]) {
        //頁面失去焦點也就是切換頁面時清除定時器
        clearInterval(scrollTimer)    //清除定時器
        console.log("失去焦點");
    } else {
        //頁面聚焦時開啟定時器,即重新初始化banner圖片滾動
        bannerScroll()
        console.log("得到焦點");
    }
}

// 判斷瀏覽器的支持情況
if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
    console.log("不支持檢測頁面焦點獲取。");
} else {
    // 監聽visibilityChange事件
    document.addEventListener(visibilityChange, handleVisibilityChange, false);
}
// 圖片向上滾動，暫停3s
function slider(imageRealHeight, interval, rollClass) {
    clearInterval(scrollTimer);
    let imageBox = document.getElementById("imageBox");
    imageRealHeight = parseFloat(imageRealHeight);
    let clientHeight = parseFloat(document.body.clientHeight);
    let edgeLength = (clientHeight - imageRealHeight) / 2;
    const imageHtml = imageBox.innerHTML;
    imageBox.innerHTML = imageHtml + imageHtml + imageHtml;
    imageBox.style.top = -(imageRealHeight - edgeLength) + 'px';
    let count = 0;
    scrollTimer = setInterval(() => {
        imageBox.classList.add(rollClass);
        const initTop = -(imageRealHeight - edgeLength) + 'px';
        if (count++ === 30) {
            imageBox.classList.remove(rollClass);
            imageBox.innerHTML = imageHtml + imageHtml + imageHtml;
            imageBox.style.top = initTop;
            count = 0;
        } else {
            imageBox.innerHTML = imageBox.innerHTML + imageHtml;
            imageBox.style.top = parseFloat(imageBox.style.top) - (imageRealHeight) + 'px';
        }
    }, interval)
}

bannerScroll()；// 執行圖片滾動方法

頁面顯示監聽參考鏈接