大家来看下这个定时器，为什么if必须放在里面才能清除掉这个定时器，外面就不行。

<!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>

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

</style>
</head>
<body>
<div id="div1"></div>
</body>

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

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

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

</script>
</html>

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

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

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

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

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

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

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

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

【热门文章】