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