如何在RequestAnimationFrame中使用带参数的函数?

时间:2013-12-02 19:20:52

标签: javascript requestanimationframe

好吧所以我在堆栈溢出和网页上搜索了如何使用RequestAnimationFrame并包含一个函数 WITH PARAMETERS 所以这是我的代码问题

requestAnimationFrame(move);
function move(speed) {
    blackSquare.position.y -= 1;
    var moveBS = blackSquare.position.y - 12.5;
    //"stoping it from moving" //begin
    if (moveBS > 0) {
    requestAnimationFrame(move);
    moveBS = blackSquare.position.y + 12.5;
    }
    else {
        console.log("SUCCESS!");
    }
    //"stoping it from moving" //ends
}

这有效,但我希望“移动”有参数,所以当我尝试

requestAnimationFrame(move(1));
function move(speed) {
    blackSquare.position.y -= speed;
    var moveBS = blackSquare.position.y - 12.5;
    //"stoping it from moving" //begin
    if (moveBS > 0) {
    requestAnimationFrame(move);
    moveBS = blackSquare.position.y + 12.5;
    }
    else {
        console.log("SUCCESS!");
    }
    //"stoping it from moving" //ends
}

我的blackSquare会在一瞬间出现,然后消失。 在Chrome控制台上会出现错误“未捕获的TypeError:类型错误”,指出第二个提供的代码中的第一行。然后是“成功!”

    requestAnimationFrame(move(1));
function move(speed) {
    blackSquare.position.y -= speed;
    var moveBS = blackSquare.position.y - 12.5;
    //"stoping it from moving" //begin
    if (moveBS > 0) {
    requestAnimationFrame(move(1));
    moveBS = blackSquare.position.y + 12.5;
    }
    else {
        console.log("SUCCESS!");
    }
    //"stoping it from moving" //ends
}

虽然当我改变两者时,结果略有不同,因为正方形消失,然后立即出现在屏幕的末尾(我的意图,但动画慢慢) 控制台日志看起来像这样

SUCCESS!
Uncaught TypeError: Type error

而不是

Uncaught TypeError: Type error
SUCCESS!

有人可以帮助我完成这项工作并告诉我代码中究竟发生了什么吗?

2 个答案:

答案 0 :(得分:0)

我相信你可以这样做:

var move_param = 1; // Whatever your move parameter needs to be

requestAnimationFrame(function() {
    move(move_param);
});

在这里,您将匿名函数传递给requestAnimationFrame,然后使用提供的参数调用move

答案 1 :(得分:0)

当您致电requestAnimationFrame(move(1));时,您实际上正在调用移动功能。您需要做的是传递对移动函数的引用。当调用requestAnimationFrame时,它会使用单个参数调用您的函数,该参数是以毫秒为单位计划绘制帧的时间。