setTimeout和setInterval的程序休眠问题

问题

在我们使用到setTimeoutout或者setInterval的时候，我们将浏览器最小化，过了一段时间后再打开，发现setTimeou/setInterval会暂时进入休眠状态，但并不是不执行程序，它会把setInterval/setTimeout的回调函数放在队列中,等浏览器再次打开的时候，一瞬间全部执行。这样就会出现一系列的问题，比如我在做一个弹幕的组件，使用setTimeout控制弹幕的发射，但是浏览器缩小后，过了很久打开，就会发现一下子很多弹幕出来，造成弹幕重叠。

解决方法

如果页面是不可见的时候，那么我们就清除定时器，如果页面可见的时候，那么我们重新开启定时器

在这之前，我们先了解一下3个方法：

• document.onvisibilitychange：只要页面中发生变化，不管是切换到其他页面还是把浏览器缩小，都会触发这个事件。
• document.hidden.这个是指前页面不是当前页面的时候，否则为false
• document.visibilityState。

这个属性有四个值，分为是：visible，hidden，prerender，unloaded

visible 表示当前网页是可见或者是部分可见的。

hidden：当前网页是不可见的

prerender 网页内容被预渲染并且用户不可见

unloaded 如果文档被卸载，那么这个值将被返回

以上，实现就可以通过以下解决这个问题：

document.onvisibilitychange = function () {
    if (document.visibilityState == "visible") { 
        timer = setInterval(slidemove, 1000); 
    }
    else {
        clearInterval(timer);
    }
}
复制代码

以上方法感觉还是有兼容性问题的，这个可以细细研究。

另外

如果你是在小程序中，那么可以利用好微信小程序的生命周期。

onShow() {
    _this.timerCheck = setTimeout(function () {}, 1000);
},
onHide() {
    clearTimeout(_this.timerCheck);
}
复制代码