问题：
setInerval实现图片滚动，离开页面后又返回页面时图片加速滚动
代码本身实现方案：
在每次页面加载的时候会清除定时器。
问题产生原因：
由于在加载了图片滚动的页面之后，又去到了其他页面，但是定时器没有停止，而页面又没有显示在用户面前，当返回页面的时候，就会把之前定时器中已经移动的图片动画一股脑移动，就会出现如题所述加速滚动的效果。
解决办法：
监听页面是否显示在用户面前，是：重新走定时器方法，否，清除定时器。
以下判断页面是否展示的方法，在安卓5.0 等低版本系统下不生效。
代码语言：javascript复制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)
}
页面显示监听参考链接
