[JavaScript]记录完成轮播过程中的几个点
记录几个坑
之前的轮播:
完整代码:GitHub
效果预览:GitHub
最近完成的轮播:
完整代码:GitHub
效果预览:GitHub
在完成轮播中解决两个问题:
1.setInterval()会和按钮绑定的事件发生冲突。
表现为:setInterval()设置了每3S轮播一次,在没有任何动作干扰的情况下,轮播正常;但是当需要点击按钮跳转到其他图片时,从点击按钮到图片跳转成功的这段时间,假设是1S,也会计算到setInterval()设定的时间中;即从A1到A2需要3S,在A1到A2的过程中2.5S时,我们点击A3,他就不会在A3上停留3S再轮播,而是从A3到A4只需要0.5S(3-2.5)。
解决办法:给轮播组件添加监听事件,一旦鼠标移入组件范围,轮播停止;鼠标移出,轮播继续。这样就能保证每一张图片到下一张图片都需要3S的时间。
$('#slidesWrapper').on('mouseenter',function(){
window.clearInterval(timerId)
})
// 当鼠标移出
$('#slidesWrapper').on('mouseleave',function(){
timerId = setTimer()
})
2.轮播絮乱
表现为:一旦浏览器离开轮播的tab,跳转到其他的tab后过一段时间再回来,轮播的速度会加快。
解决方法:给document添加visibilitychange
事件。
浏览器标签页被隐藏或显示的时候会触发visibilitychange事件.
我们只要判断:如果标签页被隐藏,则轮播停止;标签页被显示,轮播继续,就可以解决这个问题了。
如:
document.addEventListener('visibilitychange',function(e){
if(document.hidden){
window.clearInterval(timerId)
}else{
timerId = setTimer()
console.log(2)
}
})