3
回答
JavaScript之定时器内嵌套定时器
注册华为云得mate10,2.9折抢先购!>>>   

源码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 100px; height: 100px; background: orange; left: 0px; position: absolute;}
</style>

<script>

function css(obj,attr,val){

    if(!val){

        if(obj.currentStyle){
            
            return obj.currentStyle[attr];
            
        }else{
            
            return getComputedStyle(obj,false)[attr];
            
        }
    
    }else{
        
        obj.style[attr]=val;
        
    }

}    


window.onload=function(){

    var oDiv=document.getElementById('div1');
    var timer=null;
    
    oDiv.onclick=function(){
        
        timer=setInterval(function(){
            
                timer=setInterval(function(){
                    // var iLeft=parseInt(css(oDiv,'left'))+10;
                    // css(oDiv,'left',iLeft+'px');
                    // clearInterval(time);
                },1000);

            var iLeft=parseInt(css(oDiv,'left'))+10;
            css(oDiv,'left',iLeft+'px');
            clearInterval(timer);
        },500);    
    };    
};
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

单击橙色的“口子”,这个“口子”移动,说明执行到 clearInterval(timer);的前面一句,那么应该清除定时器了,怎么着“口子”一直移动下去?

<无标签>
举报
共有3个答案 最后回答: 5年前

引用来自“看世界之多彩”的答案

谢谢楼上回答
其实我想知道,为啥嵌套了一个定时器,就能一直走下去?怎么解释?

原因很简单,你设置了两个定时器timer = setInterval

而清除的时候 clearInterval只清楚了一次,有一个定时器没有清除。

就造成了一直走下去。

建议楼主最后 两次定时器的变量不要起一样的名字。

这样清除的时候,就可以都清除了。

clearInterval(timer1)

clearInterval(timer2)

--- 共有 1 条评论 ---
看世界之多彩恩,名字得不一样。还有另一个问题!你懂得,双击的那个 5年前 回复

楼主想要的效果是点一下走一下?

看看这个效果是你要的吗?我改了一下。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 100px; height: 100px; background: orange; left: 0px; position: absolute;}
</style>

<script>

function css(obj,attr,val){

    if(!val){

        if(obj.currentStyle){
            
            return obj.currentStyle[attr];
            
        }else{
            
            return getComputedStyle(obj,false)[attr];
            
        }
    
    }else{
        
        obj.style[attr]=val;
        
    }

}    


window.onload=function(){

    var oDiv=document.getElementById('div1');
    var timer=null;
    
    oDiv.onclick=function(){
        
        timer=setInterval(function(){

            var iLeft=parseInt(css(oDiv,'left'))+10;
            css(oDiv,'left',iLeft+'px');
            clearInterval(timer);
            
        },500);    
    };    
};
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

顶部