为什么我需要for()来使setInterval工作?

时间:2013-03-29 23:26:46

标签: javascript

我在游戏结束时制作动画。我把这个代码从各种谷歌拼凑在一起。

function showSpider(){
    for (var i=0;i<30;i++)
    {
        var theInterval=setInterval(function() { 
            newX=newX+1;
            if (newX>100){
                newX=100; 
                clearInterval(theInterval);
                document.getElementById('speak').style.visibility="visible";  
            }
            document.getElementById('spideranim').style.webkitTransform = "translate3d        (250px, "+newX+"px,0px)"; 
            document.getElementById('spideranim').style.visibility="visible";  
        }, 100); 
    }
    var temp=(Math.ceil((fliesShown/keysHit)*100));
    document.getElementById("speak").value="You got "+temp+" percent.";     
}

问题是它有效。我试图取出for语句,因为它对于间隔来说不应该是必要的。然后蜘蛛动画没有显示出来。没有出现错误。

为什么我不能把它拿出来?

我也尝试使用以下代码的setInterval:

function showSpider() {
    theInterval=setInterval("wasteTime()",1000);
    var temp=(Math.ceil((fliesShown/keysHit)*100));
    document.getElementById("speak").value="You got "+temp+" percent accuracy.";        
}

function wasteTime(){   
    newX=newX+1;
    //alert("newX"+newX);
    //alert(document.getElementById('spideranim').style.webkitTransform);
    //alert(document.getElementById('spideranim').style.visiblity);
    if (newX>100){
        newX=100; 
        clearInterval(theInterval);
        document.getElementById('speak').style.visibility="visible";  
    }
    document.getElementById('spideranim').style.webkitTransform = "translate3d    (250px, "+newX+"px,0px)"; 
    document.getElementById('spideranim').style.visibility="visible"; 
}

这不起作用。为什么不起作用?

1 个答案:

答案 0 :(得分:0)

  • 简答:

newX永远不会变成&gt; 100因为newX=newX+1;未执行。

  • 答案很长:

需要更多的上下文..无法告诉他们在没有其他代码的情况下继续进行 - 但是如果没有 for 循环,newX永远不会超过100,因为newX=newX+1;没有被执行。

因此,newX将保持循环之前的任何值(例如:newX=40)。结果,document.getElementById('speak').style.visibility="visible";永远不会执行(我盲目地假设这是一种胜利的消息)