Аргумент функции увеличивается сам по себе, и я не меняю его

Question

Аргумент функции увеличивается сам по себе, и я не меняю его

1

Итак, я пытаюсь переместить прямоугольник на холст html5, и я создал свою функцию для этого. Он получает аргумент скорости, который затем прирастает в позицию, например (c - контекст canvas):

this.moveDown = function moveDown(velocity){
    requestAnimationFrame(moveDown);
    c.clearRect(posX, posY, width, height);
    posY += velocity;
    console.log(velocity);
    c.fillRect(posX, posY, width, height);
}

Впоследствии я называю это в другом файле javascript, чтобы он работал:

var rect1 = new spiel.Rectangle(10,10, 100,100, "#F0F0F0");
rect1.draw();
rect1.moveDown(1);

Как вы можете видеть, он получает 1, как скорость, и должен (насколько мне известно) перемещать прямоугольник на 1 пиксель на каждую итерацию, не так ли? проблема в том, что когда я пытаюсь использовать console.log() переменную скорости, это то, что возвращается на каждую итерацию в консоли:

По-видимому, переменная скорости увеличивается на каждую итерацию. Чем это вызвано? Как я могу исправить эту проблему? Кроме того, в файле javascript, который я вызываю функцию, все обернуто в функцию window.load, если это может быть причиной

window.onload = function(){

spiel.drawCanvas(800,600, "#FFF000");

var rect1 = new spiel.Rectangle(10,10, 100,100, "#F0F0F0");
rect1.draw();
rect1.moveDown(1);
};

Klaus Mana 03 сен. 2017, в 13:06

Источник

Теги:

javascript

html5

html5-canvas

1 ответ

Ещё вопросы

T.J. Crowder · Accepted Answer · 2017-09-03T08-58-00.000Z

requestAnimationFrame передает значение таймера высокого разрешения функции, которую он вызывает. Это то, что вы видите по velocity, потому что вы перешли moveDown в rAF:

requestAnimationFrame(moveDown);

Итак, сначала вы видите тот, с которым вы его вызываете, но впоследствии вы видите значение таймера, с которым он звонит rAF.

(Боковое примечание: вы безоговорочно звоните в rAF, чтобы запланировать обратный вызов, предположительно, у вас где-то есть условие остановки?)

Если вы хотите, чтобы он продолжал получать 1, просто используйте функцию обертки или bind:

Упаковочный:

this.moveDown = function moveDown(velocity){
    // NOTE: This works because 'moveDown' doesn't use 'this'
    // If you need 'this', you'd have to do one of the many things to ensure it
    requestAnimationFrame(function() { // Presumably you'll have a stop condition on this?
        moveDown(velocity);
    });
    c.clearRect(posX, posY, width, height);
    posY += velocity;
    console.log(velocity);
    c.fillRect(posX, posY, width, height);
}

bind:

this.moveDown = function moveDown(velocity){
    // Handles 'this', in case the function ever changes to use it
    requestAnimationFrame(this.moveDown.bind(this, 1)); // Presumably you'll have a stop condition on this?
    c.clearRect(posX, posY, width, height);
    posY += velocity;
    console.log(velocity);
    c.fillRect(posX, posY, width, height);
}

Поскольку обратный вызов rAF может работать 60 раз/секунду, нам может потребоваться избежать создания функции каждый раз, поэтому:

this.moveDown = function moveDown(velocity){
    var handleMove = function() {
        requestAnimationFrame(handleMove); // Presumably you'll have a stop condition on this?
        c.clearRect(posX, posY, width, height);
        posY += velocity;
        console.log(velocity); // And probably remove this
        c.fillRect(posX, posY, width, height);
    }.bind(this); // *IF* you need 'this'
    handleMove();
}