Question

我正在玩动画。我试图让两个圆圈移动指定的距离，然后停下来。我遇到的问题是多个间隔。我将每个区间分配给一个唯一的变量，并将clearInterval分配给该变量，但第一个区间继续。

以下是代码：

function moveRight(player){

if(player==1){
    currentLoc = p1Loc[0];            //global var with player's current location
    intervalR1 = setInterval(function(){
        p1Loc[0]+=1;
        draw();                      //function that redraws the canvas
        if(p1Loc[0]>currentLoc+wu){  //wu is a single "width-unit"
            clearInterval(intervalR1);
        }
    },5)
}
else{
    currentLoc = p2Loc[0];
    intervalR2 = setInterval(function(){
        p2Loc[0]+=1;
        draw();
        if(p2Loc[0]>currentLoc+wu){
            clearInterval(intervalR2);
        }
    },5)
}

}

然后，假设我在while循环中给出以下说明：

instructions = ["moveRight(1)", "moveRight(2)"];
for(instruction in instructions){
    eval(instructions[instruction]); //I know, eval(), ugh. Is just temporary
}

最终发生的事情是，两名球员都开始向右移动，但是球员2在单个wu或者宽度单位之后停止，而玩家1继续前进。如果我将指令更改为“moveRight（1）;”，则玩家1移动单个wu并停止。

这里发生了什么？

Answer 1

这只是一个猜测，因为有点难以判断只有部分代码发生了什么，但可能是你分配currnetLoc两次，因此第一个玩家＆＃39;的位置始终始终与p2Loc[0]进行比较？

因此，当您致电moveRight(1)时，它会将currentLoc设置为p1Loc[0]，然后继续。然后在您致电moveRight(2)后立即将currentLoc设置为p2Loc[0]。所以现在玩家1的间隔比较不再是p1Loc[0]>currentLoc+wu，而是p2Loc[0]>currentLoc+wu。根据{{1}}的值，这可能始终为p2Loc。

Answer 2

这一行：

currentLoc = p1Loc[0];            //global var with player's current location

有点吓人。不要使用全局，特别是当你在函数的第二个条目上重新分配它的值时：

currentLoc = p2Loc[0];

这可能是你的问题。

如果您需要跟踪单个玩家的位置，请创建一个玩家对象并在其中跟踪它，例如：

function Player(number) {
    this.number = number
    this.position = 0 //some default initial position
}

并将其传递给moveRight（）

Javascript setInterval：多个间隔

2 个答案: