• 移动开发

    移动端页面后台挂起时setInterval和setTimeout会继续执行的问题

    by on 2014年07月21日

最常见的情形是自动轮播图效果,当浏览器可以允许标签式打开的时候,打开了新的标签,旧的标签页面上的轮播图会持续地执行。这不仅占用内存,还可能导致一些额外的问题。

比如自动切换时会加载图片,这流量就白白浪费了。

onpageshow 和  onpagehide 是残废的方法,几乎没什么用,但是onblur 和 onfocus 竟然在此可以有神奇的作用,即给window绑定focus 和blur事件,在blur的时候 清除定时器,当然我们也可以做点别的事情。

经过验证,仅在webkit核内有效包括android,IE、firefox 无效。

ios上会有ios自动处理。

在窗口切换中,存在一个半窗口的状态,这个时候定时器能够自动执行2秒,过后就自动停止,如果是切换到全窗口的新页面上,后面的页面会立即停止。

不管怎样这是处理android浏览器性能问题的一个重要东西了!

下面是页面测试代码:

<div id=”test”></div>
<div id=”aaa”><a href=”/”>aaaaaa</a></div>
<script>
var el = document.getElementById(‘test’),
aaa = document.getElementById(‘aaa’),
page = 0,
Timer;
function auto() {
Timer = setTimeout(function() {
page++;
el.innerHTML = page;
auto();
},1000)
}
auto();
window.onblur = function() {
if (Timer) clearTimeout(Timer);
aaa.innerHTML = ‘blur clear’
}
window.onfocus = function() {
auto();
aaa.innerHTML = ‘focus auto’
}
</script>

<div id=”test”></div><div id=”aaa”><a href=”/”>aaaaaa</a></div><script>var el = document.getElementById(‘test’), aaa = document.getElementById(‘aaa’), page = 0, Timer;function auto() { Timer = setTimeout(function() { page++; el.innerHTML = page; auto(); },1000)}auto();window.onblur = function() { if (Timer) clearTimeout(Timer); aaa.innerHTML = ‘blur clear’}window.onfocus = function() { auto(); aaa.innerHTML = ‘focus auto’}
</script>