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()；// 执行图片滚动方法

页面显示监听参考链接