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);
}
复制代码