问题：
setInerval实现图片滚动，离开页面后又返回页面时图片加速滚动
代码本身实现方案：
在每次页面加载的时候会清除定时器。
问题产生原因：
由于在加载了图片滚动的页面之后，又去到了其他页面，但是定时器没有停止，而页面又没有显示在用户面前，当返回页面的时候，就会把之前定时器中已经移动的图片动画一股脑移动，就会出现如题所述加速滚动的效果。
解决办法：
监听页面是否显示在用户面前，是：重新走定时器方法，否，清除定时器。
以下判断页面是否展示的方法，在安卓5.0 等低版本系统下不生效。
= document.getElementById("imageBox"'roll-animation-3''roll-animation-2''roll-animation-1'=== ((320 / 250) + (320 / 90)) / 2; const ratio = bodyWidth /= == ""= ""= document.getElementById("adLeft"= === adLeft.offsetWidth * (leftImageHeight /let imageItem = Array.from(document.getElementsByClassName('image-item'= imageRealHeight+'px' (ratio < v1) { slider(imageRealHeight, 4000, "roll-animation-1" { slider(imageRealHeight, 3000, "roll-animation-3" scrollTimer ; ( document.hidden !== "undefined"= "hidden"= "visibilitychange" ( document.msHidden !== "undefined"= "msHidden"= "msvisibilitychange" ( document.webkitHidden !== "undefined"= "webkitHidden"= "webkitvisibilitychange"clearInterval(scrollTimer) console.log("失去焦点""得到焦点" ( document.addEventListener === "undefined" || document[hidden] === "undefined""不支持检测页面焦点获取。"document.addEventListener(visibilityChange, handleVisibilityChange, = document.getElementById("imageBox"=== (clientHeight - imageRealHeight) / 2== imageHtml + imageHtml += -(imageRealHeight - edgeLength) + 'px'= 0= setInterval(() =>= -(imageRealHeight - edgeLength) + 'px' (count++ === 30= imageHtml + imageHtml +== 0= imageBox.innerHTML += parseFloat(imageBox.style.top) - (imageRealHeight) + 'px'bannerScroll()；// 执行图片滚动方法
页面显示监听参考链接
Copyright © 2004-2024 Ynicp.com 版权所有 法律顾问:建纬(昆明)律师事务所 昆明市网翼通科技有限公司 滇ICP备08002592号-4
