js轮播的bug

切换标签页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)
当自己进行学习的时候,可以花时间去探索,造轮子,自己撸一遍.但是要分清工作和学习的不同状态

完整代码查看