javascript 定时器和变量相关 忘好心人前辈帮忙看一下。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
div{
width:20px;
height:20px;
background-color: red;
position: absolute;
margin-top: 10px;
float:left;
top:0;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function (){
var len = 100,
num = 0,
num1 = 0,
timer = null,
timer1 = null,
off = true,
aDiv = document.getElementsByTagName('div');
function getStyle (obj,attr){
return obj.currentStyle? obj.currentStyle[attr] : getComputedStyle(obj,null)[attr];
};
for(var i = 0 ; i< len ; i++){
document.body.innerHTML += "<br><div></div><br>"
};
for(var i = 0 ; i<aDiv.length ; i++){
aDiv[i].style.left = i*30+'px';
}
document.onclick = function (){
/*为何将num = 0，timer = null申明为局部变量啦之后 红色方块就恢复正常。
（就是快速双击的时候不会出现div上下分离了，而是无论如何点击都是按照重第一个块开始按预期的走（就是按局部变量种）。
我尝试着去除var 关键字，变成全局变量后就出现不正常。
问题说明：这两种变化我不知道是什么原因造成的！我觉得这里声明局部或者全局变量
的作用是一样的。都是为了重置~）希望有热心人解答一下，我弄好久没弄出来...*/
num = 0;
timer = null;
if(off ){
lastFn(500);
off = false;
}else{
lastFn(0);
off = true;
};
function lastFn (target){
clearInterval(timer);
timer = setInterval(function(){
doMore(aDiv[num],'top',100,target);
num++;
if(num === len){
clearInterval(timer);
};
},30);
};
};
function doMore (obj,attr,dir,target,endFn){
dir = parseInt(getStyle(obj,attr)) < target? dir :-dir;
clearInterval(obj.timer);
obj.timer = setInterval(function (){
var iSpeed = parseInt(getStyle(obj,attr))+dir;
if(iSpeed > target && dir > 0 || iSpeed < target && dir < 0){
iSpeed = target;
endFn && endFn();
};
obj.style[attr] = iSpeed+'px';
},30);
};
};
</script>
</body>
</html>
