轮播轮播

1. 无缝轮播bug原因

之前无缝轮播在切换其他页面再回来的时候会出现错乱bug，造成这样的原因是切换到其他页面的时候其实轮播是会搞些其他小动作，比如偷懒啊什么的，当你切换回来的时候突然会把之前需要轮播的图片一下播完，我们可以在html中加入一下代码，打印出来当前事件，在轮播页面时，可以看到打印都是正常的，当我们切换到其他页面等待几秒切换回来的时候发现，打印出来的有的每秒只打印出来一次，因为设置的是每秒打印两次。

 <script>
    setInterval(function(){
        console.log(new Date) //打印当前事件(每秒2次)
    },500)
</script>

深度截图_选择区域_20180425224501.png

2. 解决bug

知道问题所在了，解决办法很简单，既然用户切换到其他页面，为什么还要浪费内存继续轮播呢，完全可以暂停轮播，用户切换回来继续播放。这就要考虑怎么能知道用户有没有在轮播页面呢？可以使用visibilityChange这个API,打印出来doucument.hidden这个属性，当切换页面回来的时候我们看到true和false，true是代表切走状态，false是代表切换回来状态，这样可以在hidden状态砸掉闹钟，false的时候启动闹钟，码如下：

let timer = setInterval(() => { //闹钟设置名字timer，方便砸
   // $(`.images > img:nth-child(${x(n)})`).removeClass('current').addClass('leave')
   leaveActive(indexImg(n)) //leaveActive这个函数返回值是undefined，
       .one('transitionend',(e) => { // undefined后边接事件肯定不行，可以让leaveActive把这个节点当做返回值返回
           // $(e.currentTarget).removeClass('leave').addClass('enter')
           enterActive($(e.currentTarget))
       })
   // $(`.images > img:nth-child(${x(n+1)})`).removeClass('enter').addClass('current')
   currentActive(indexImg(n+1))
   n += 1
},2000)
//监听用户是否在浏览轮播页面
document.addEventListener('visibilitychange',function(e){
   console.log(document.hidden)
   if(document.hidden){
       //停掉轮播
       window.clearInterval(timer)
   }else{
       //重新启动轮播
       let timer = setInterval(() => { //timer名字留着方便下一次砸闹钟
       leaveActive(indexImg(n)) 
           .one('transitionend',(e) => {
               enterActive($(e.currentTarget))
           })
       currentActive(indexImg(n+1))
       n += 1
       },2000)
   }
})