零分杂记

之前写了一个模板，焦点图的播放速度会越来越快，做过清除过定时器clearInterval，似乎并没有改变，也就放着并无理会！

最近写另一个模板，焦点图调用同样的JS，长时间观察，并没有发现定时器setinterval越来越快的现象！又重新回到之前的模板，仔细的观察了一下，可能是因为设置了两个setinterval的原因！

JS的运行时单线程的，两个setinterval可能会发生冲突，导致定时器越来越快！虽然调用了不同的function！完成之后回去去掉一个setinterval再试试！

第二次：

模板需要轮播焦点图，支持手机触屏滑动，效果代码很早之前就写了，使用了setInterval定时器播放，animate播放效果，速度一直出现越来越快的问题！

第一次修改：clearInterval(timer);将timer定义到全局变量，解决了当前页播放越来越快的问题！使用一段时间后，有出现了越来越快的问题，随后就搁置了！

第二次修改：将setInterval改成了setTimeout，使用一段时间后，发现还是会有越来越快的问题！

之后百度了一个轮播焦点图，使用一段时间后，感觉不顺手！

第三次修改：每次setInterval前，都添加一次clearInterval，在切换标签之后，一段时间，还是会越来越快！

百度了一下，还是没有找到具体的解决方案！继续使用上次百度的轮播图代码（真心不符合心里要求）

今天再次百度了下，了解到了一个问题，越来越快不应该发生在setInterval上，因为每次越来越快之后，轮播图的小圆点是正常的，之后播放效果越来越快！问题可能出现在了animate上！

“发现这是因为浏览器本着节省内存的性质，当切换到其他页面时，页面的定时器不运动，但是动画依然排列，当切换回来的时候，动画加速运动，出现错误，在轮播图之类的页面经常会发生这样的情况”

百度出来的说明，检查了下代码，animate的写法确实是和其他的不一样，别人的写法是：stop.animate，我直接就animate了，所以，可能是在切换浏览器的时候，setInterval停止了，但是animate动画却一直在排列，所以当切换浏览器标签回来的时候，前面已经积压了一堆的动画一下子就开始全部播放了，clearInterval也无法起作用，因为压根和clearInterval无关

所以，第四次修改，将animate改成stop.animate，另外顺便判断了下当前页面是否可见document.onvisibilitychange，当切换到其他标签的时候，停止顺便也停止了下定时器！

$(document).on('visibilitychange', function (e) {
if (e.target.visibilityState === "visible") {
play();
} else {
stop();
}
});

现在切换回来的时候停留在了切换走时的动画页面！应该不会再发生越来越快的问题了！