javascript - 大家来看下这个定时器，为什么if必须放在里面才能清除掉这个定时器，外面就不行。-PHP中文网问答

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>

<style>

p{
    width:10px;
    height:10px;
    background:red;
}

</style>
</head>
<body>
<p id="p1"></p>
</body>

var op=document.getElementById("p1");
function slide(){
    op.style.width=op.offsetWidth+2+"px";
}
timer=setInterval(slide,30);

if(op.offsetWidth>100){
    clearInterval(timer);
}
/*
    if这样放在外面是错误的，达不到预期效果————到100时定时器无法清除
    如果我将if放在 slide()里面就可以
    比如：
    
        var op=document.getElementById("p1");
        function slide(){
             op.style.width=op.offsetWidth+2+"px";
             if(op.offsetWidth>100){
             clearInterval(timer);
             }
        }
        timer=setInterval(slide,30);

    既然这样我发现我在做图片轮播的时候
    如果加onmouseover就完全不好加了，有点蒙圈
    
    各位给个意见咯
    俯首拜谢    
*/
op.onmouseover=function(){
    clearInterval(timer);
}

</script>
</html>

全部回复(4)

黄舟2017-04-10 16:12:02 4楼

如一楼所说，if放在外面，它只执行一次，而且执行的时候op.offsetWidth应该还没>100，js是顺序执行下来的，也就是说，你setInterval执行一次的时候，就接下去执行if了，但当setInterval执行第二次的时候，并不会再执行if，而是重复得执行slide，就是酱紫。
当然，你原来那样写，直接在外面清除定时器，一点问题没有，只不过你需要加个

op.onmouseout=function(){
    //鼠标移出时，重新开启定时器
    timer=setInterval(slide,30);
}

还有一个问题很重要，在做条件判断的时候，要把if跟else写完整，true的时候才clearInterval，false才op.style.width=op.offsetWidth+2+"px";

function slide(){
     if(op.offsetWidth>100){
         clearInterval(timer);
     }else {
         op.style.width=op.offsetWidth+2+"px";
     }
}

赞 +0

添加回复

ringa_lee2017-04-10 16:12:02 3楼

if放在外面的话，执行过一次就不会再执行啦，根本就不会重新获取op的offsetWidth，这样的话就永远不会清除定时器，但是放在里面的话，定时器每次调用slide的时候就会重新获取offsetWidth，这样当对应的值大于100的时候自然就会清除啦

ringa_lee2017-04-10 16:12:02 2楼

setInterval是一个异步操作。实际上当offsetWidth没大于100的时候就执行if了。

ps: 有个答案说if没执行的简直误人子弟！

巴扎黑2017-04-10 16:12:02 1楼

get*byId不是动态实时更新，并且setInterval相当于多开了一个线程，会顺序执行，执行到if的时候新开的线程还没有到达判断结果