递归requestAnimationFrame()javascript循环直接跳转到最后

时间:2015-02-12 13:35:23

标签: javascript function animation recursion

我试图在javascript中学习动画。

我有一个带有x和y坐标的路径数组,我试图通过递归来完成。但是不是一次移动盒子(方框[1]),而是直接跳到最后一个位置。如果我在循环中添加一个警报,那么动画将"工作",这样它就可以在每个警报之间一次一步地移动框。

function followPath(){
    box1[1].style.left = path[index][0]+'px';
    box1[1].style.top = path[index][1]+'px';
    index++; //I put an alert("hi"); here and it "worked"
    if(index < path.length)
         requestAnimationFrame(followPath());

}

function buttonPress(){
    index = 0;
    followPath();
}

是什么原因引起的?

作为一个旁注,当我试图将变量传递给类似的递归函数时,我遇到了同样的问题。在我尝试将变量传递给它之前,该函数运行得很好。

感谢。

1 个答案:

答案 0 :(得分:2)

requestAnimationFrame的参数是一个函数,而不是函数返回的函数。这一行:

requestAnimationFrame(followPath());

应该是

requestAnimationFrame(followPath);