Question

这很奇怪吗？在typescript类中时，我无法使requestAnimationFrame与eventlisteners keyup / down一起使用-但如果我不在类中，它就可以正常工作吗？帮助我解决此问题，或者只是告诉我为什么它永远无法在类中使用。...

  class GameEngine
{
    private aKey:boolean
    private canvas:HTMLCanvasElement;
    private ctx:CanvasRenderingContext2D;

    constructor()
    {
        this.canvas = <HTMLCanvasElement> document.getElementById("canvas");
        this.ctx = this.canvas.getContext("2d");

        document.addEventListener('keyup', this.keyUp, false);
        document.addEventListener('keydown', this.keyDown, false);

        this.loop();
    }

    private keyDown(event:KeyboardEvent): void
    {
        if (event.repeat) {return};
        console.log("KeyDown");
        console.log(this.aKey);
        if (event.key == 'a')
        {
            this.aKey = true;
            console.log(this.aKey);
        }
    }

    private keyUp(event: KeyboardEvent): void
    {
        if (event.key == 'a')
        {
            this.aKey = false;
        }   
    } 


    private loop()
    {
        console.log(this.aKey);
        if (this.aKey == true) this.ctx.fillRect(10,10,10,10);
        window.requestAnimationFrame(this.loop.bind(this));

    }
}

new GameEngine();

当我按“ a”键时，它会在控制台中按预期写入true / false 但是循环继续打印“未定义”？

Answer 1

如果使用将附加的处理函数附加到元素 addEventListener（），此值在处理程序中为对元素的引用。

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#The_value_of_this_within_the_handler

在您的示例中，this是文档对象。

只需为您的侦听器使用bind方法，它应该可以正常工作。您可以在我上面发布的链接中了解更多信息。

document.addEventListener('keyup', this.keyUp.bind(this));
document.addEventListener('keydown', this.keyDown.bind(this));

打字稿：requestAnimationFrame和eventlistener：keyup / keydown

1 个答案: