求解一个定时器的问题


<head>
<style>
#div1{width:0px; height:150px; background:#000; position:absolute; left:0;}
</style>
<script>
window.onload=function()
{
var oDiv=document.getElementById('div1');
var timer=null;
var timer2=null;
timer=setInterval(function(){
oDiv.style.width=oDiv.offsetWidth+10+'px';
if(oDiv.offsetWidth==1500)
{
clearInterval(timer)
oDiv.style.width='0px'
}
},30)
timer2=setInterval(function(){
clearInterval(timer)
timer=setInterval(function(){
oDiv.style.width=oDiv.offsetWidth+10+'px';
if(oDiv.offsetWidth==1500)
{
clearInterval(timer)
oDiv.style.width='0px'
clearInterval(timer2)
setInterval(function(){
                                //把这个定时器称为最内层定时器
oDiv.style.width=oDiv.offsetWidth+10+'px';
if(oDiv.offsetWidth==1500)
{
clearInterval(timer)
oDiv.style.width='0px'
                                   
}
},30)
}
    },30)
},4500)
}</script>
</head><body>
<div id="div1"></div>
</body>
</html>
也许觉得上面代码有点重复累赘吧，我也这么觉得，但是我的JS水平有限，已经无法做实质性的化简了。其实我需要的功能是，无限执行一个动画，但是页面最小化的时候，会出现问题，可能是因为开启着两个定时器的缘故，于是作了修改，代码就像上面的，已经改好了。即使页面最小化再恢复也不会有问题了。但是后来我检查代码的时候，发现有一个地方不懂的。
我想问的是，我已经关闭定时器timer2了，为什么动画还是会无限执行下去？最内层的定时器我执行的是一个动画效果吧？并没循环执行动画效果吧？这是怎么回事？

解决方案 »

  1.   

    window.onload=function()
    {
    var oDiv=document.getElementById('div1');
    var timer=null;
    var timer2=null;
    timer=setInterval(function(){
    oDiv.style.width=oDiv.offsetWidth+10+'px';
    if(oDiv.offsetWidth==1500)
    {
    clearInterval(timer)
    oDiv.style.width='0px'
    }
    },30)
    timer2=setInterval(function(){
    clearInterval(timer)
    timer=setInterval(function(){
    oDiv.style.width=oDiv.offsetWidth+10+'px';
    if(oDiv.offsetWidth==1500)
    {
    clearInterval(timer)
    oDiv.style.width='0px'
    clearInterval(timer2)
    setInterval(function(){  //这个定时器一直没关闭啊
                                    //把这个定时器称为最内层定时器
    oDiv.style.width=oDiv.offsetWidth+10+'px';
    if(oDiv.offsetWidth==1500)
    {
    clearInterval(timer)
    oDiv.style.width='0px'
                                       
    }
    },30)
    }
        },30)
    },4500)
    }