关于页面切换后setInterval出现延时问题

直接上问题

今天没事在写3D粒子动画的时候,设置了一个延时器让粒子变换不同的样子..就像这样

本以为完美完成..然后切换页面后再回来 就会发现setInterval出现了延时.. 动画会一瞬间变的很快

1
2
3
4
5
6
7
function enableTrigger(idx) {
if(window.interval) return;
let interval = setInterval(() => {
morphTo(texts[idx].particles, '#da2f20');
idx = (idx + 1) % 3;
},3000)
}

上网搜了一下如何判断页面切换。。找到了

1
2
3
let hiddenProperty = 'hidden' in document ? 'hidden' :
'webkitHidden' in document ? 'webkitHidden' :
null;

整理一下思路,修改一下原函数完美解决

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function enableTrigger(trigger, idx) {
if(window.interval) return;
let interval = setInterval(() => {
let hiddenProperty = 'hidden' in document ? 'hidden' :
'webkitHidden' in document ? 'webkitHidden' :
null;

if(document[hiddenProperty]){
return;
}

morphTo(texts[idx].particles, '#da2f20');
idx = (idx + 1) % 3;

},3000)
}

在前公司留下的习惯 尽量减少if里的缩进 这里就直接return

Author: AddOneG
Link: http://yoursite.com/2018/06/08/关于页面切换后setInterval出现延时问题/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.