切换标签页setInterval不工作BUG
浏览器有一个BUG,当页面标签切换时,setInterval回不工作或间歇性工作.例如
每秒打印两次日期,当切换别的标签页,再切回来时发现,setInterval只打印了一次,说明setInterval间歇工作
在主页面添加如下代码，查看下状态
image.png
解决方法:
浏览器标签页被隐藏或显示的时候会触发visibilitychange事件.
visibilitychange--MDN
document.addEventListener("visibilitychange", function() {
console.log( document.visibilityState );
});
当页面标签切换出去,document.visibilityState值为hidden,再切换回来值为visible
用法2:
document.addEventListener("visibilitychange", function() {
console.log( document.hidden );
});
当页面标签切换出去,document.hidden 值为true,再切换回来值为false
示例代码:
let n;
init();
let timer = setInterval(() => {
makeLeave(getImage(n)).one('transitionend', (e) => {
//动画结束后的事件
makeEnter($(e.currentTarget))
});
makeCurrent(getImage(n + 1));
n += 1;
}, 2000)
document.addEventListener("visibilitychange", function () {
if (document.hidden) {
//使用 clearInterval() 来停止执行:
window.clearInterval(timer)
} else {
timer = setInterval(() => {
makeLeave(getImage(n)).one('transitionend', (e) => {
//动画结束后的事件
makeEnter($(e.currentTarget))
});
makeCurrent(getImage(n + 1));
n += 1;
}, 2000)
}
});
代码预览
工作中遇到轮播怎么办?千万不要自己写轮播
我们学这么多基础是为了能够看懂大神的代码,然后用大神的代码
因为如果自己写,一个轮播,就可能出现各种各样的bug,如果是在工作中,这样做无异于浪费自己的时间,降低工作效率.最好的方法是直接用大神写好的源码,然后看使用文档.
可能是最厉害的轮播组件(预览与使用)
可能是最厉害的轮播组件(github)
当自己进行学习的时候,可以花时间去探索,造轮子,自己撸一遍.但是要分清工作和学习的不同状态
完整代码查看