关于setInterval和浏览器选项卡切换的问题
.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Question</title>
<style>
.outer {border:1px solid #000; width:520px; height:300px; position:relative; padding:0; overflow:hidden;}
.inner {position:absolute;}
.inner div{border:1px solid red; width:118px; height:138px; margin:5px 5px; float:left;}
</style>
</head>
<body>
<div class="outer">
<div class="inner" id="inner">
<div>1</div><div>1</div><div>1</div><div>1</div>
<div>2</div><div>2</div><div>2</div><div>2</div>
<div>3</div><div>3</div><div>3</div><div>3</div>
<div>4</div><div>4</div><div>4</div><div>4</div>
<div>5</div><div>5</div><div>5</div><div>5</div>
<div>6</div><div>6</div><div>6</div><div>6</div>
<div>7</div><div>7</div><div>7</div><div>7</div>
<div>8</div><div>8</div><div>8</div><div>8</div>
<div>9</div><div>9</div><div>9</div>
</div>
</div>
</body>
<script>
function startScoll(){
var outer = document.getElementById("inner"),timer,mover,tempSub,
divs = outer.getElementsByTagName("div");
outerH = Math.ceil(divs.length/4)*150;
if(divs.length % 4 !== 0){
var temp = 4 - divs.length % 4;
for (var i = 0; i < temp; i++) {
outer.appendChild(document.createElement("div"));
}
}
for(var i = 0; i < 8; i++){
outer.appendChild(divs[i].cloneNode(true));
}
outer.style.top = "0px";
clearInterval(timer);
timer = setInterval(function(){
tempSub = 0;
clearInterval(mover);
mover = setInterval(function(){
outer.style.top = delPx(outer.style.top) - 10 + "px";
tempSub++;
if(tempSub == 15){
clearInterval(mover);
if(delPx(outer.style.top) == -outerH){
outer.style.top = "0px";
return false;
}
}
},30);
},3000);
function delPx(str){
return parseInt(str.substring(0, str.length - 2));
}
}
startScoll();
</script>
</html>
<!--
问题解释：点开页面之后如果选项卡不切换走，焦点一直在这个页面的话，就不会出任何问题。
如果选项卡切换到其它页面，过十几秒、二十秒回来后，发现页面滚动的位置就不准确了。
在其它页面时间比较长，不准确的越厉害，甚至不再回来了。
测试了在谷歌和火狐中都有这个问题。
多测了几遍似乎是：选项卡切走之后，这边的setInterval就停止了。
当切换回来的时候一下把没有执行的函数全部执行了，快速执行中出错了。
当然解决方法可以通过控制top值修复滚动有误的问题，我想问的是：
这个问题是怎么产生的？原理是什么？有没有更好的解决办法？
-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Question</title>
<style>
.outer {border:1px solid #000; width:520px; height:300px; position:relative; padding:0; overflow:hidden;}
.inner {position:absolute;}
.inner div{border:1px solid red; width:118px; height:138px; margin:5px 5px; float:left;}
</style>
</head>
<body>
<div class="outer">
<div class="inner" id="inner">
<div>1</div><div>1</div><div>1</div><div>1</div>
<div>2</div><div>2</div><div>2</div><div>2</div>
<div>3</div><div>3</div><div>3</div><div>3</div>
<div>4</div><div>4</div><div>4</div><div>4</div>
<div>5</div><div>5</div><div>5</div><div>5</div>
<div>6</div><div>6</div><div>6</div><div>6</div>
<div>7</div><div>7</div><div>7</div><div>7</div>
<div>8</div><div>8</div><div>8</div><div>8</div>
<div>9</div><div>9</div><div>9</div>
</div>
</div>
</body>
<script>
function startScoll(){
var outer = document.getElementById("inner"),timer,mover,tempSub,
divs = outer.getElementsByTagName("div");
outerH = Math.ceil(divs.length/4)*150;
if(divs.length % 4 !== 0){
var temp = 4 - divs.length % 4;
for (var i = 0; i < temp; i++) {
outer.appendChild(document.createElement("div"));
}
}
for(var i = 0; i < 8; i++){
outer.appendChild(divs[i].cloneNode(true));
}
outer.style.top = "0px";
clearInterval(timer);
var doing=0,bt;
timer = setInterval(function(){
if(doing
[解决办法]
new Date()-bt < 3000 ) return ;
bt=new Date();
console.info(doing)
tempSub = 0;
clearInterval(mover);
doing=1;
mover = setInterval(function(){
outer.style.top = delPx(outer.style.top) - 10 + "px";
tempSub++;
if(tempSub == 15){
clearInterval(mover);
doing=0;
if(delPx(outer.style.top) == -outerH){
outer.style.top = "0px";
return false;
}
}
},30);
},100);
function delPx(str){
return parseInt(str.substring(0, str.length - 2));
}
}
startScoll();
</script>
</html>
