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

Question

我正在尝试学习 javascript 中的动画制作。

我有一个带有 x 和 y 坐标的路径数组，我试图通过递归移动它。但是它不是一次移动框 (box[1]) 一步，而是直接跳到最后一个位置。如果我在循环中添加一个警报，那么动画将 "work"，这样它只会在每个警报之间一次移动一个框。

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();
}

这是什么原因造成的？

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

谢谢。

Answer 1

requestAnimationFrame 的参数是一个函数，而不是什么函数 returns。该行：

requestAnimationFrame(followPath());

应该是

requestAnimationFrame(followPath);

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

recursive requestAnimationFrame() javascript loop jumps directly to the end

javascript

recursion

animation

function