Question

对不起，我是js的一个完整的菜鸟，以为我掌握了对象实例和功能的基础知识，结果我没有，也不知道如何弄清楚要做什么。

我已经宣布了一个像这样的GameLoop函数/对象：

function GameLoop() {

    window.requestAnimationFrame = 
            window.requestAnimationFrame || /* Firefox 23 / IE 10 / Chrome */
            window.mozRequestAnimationFrame || /* Firefox < 23 */
            window.webkitRequestAnimationFrame || /* Safari */
            window.msRequestAnimationFrame || /* IE  */
            window.oRequestAnimationFrame; /* Opera */

    this.start = function() {
        this.update();
    };

    this.update = function() {
        this.processInput();
        this.updateState();
        this.updateGraphics();
        window.requestAnimationFrame(this.update);
    };

    this.processInput = function() {
        alert("pi");
    };

    this.updateState = function() {
        alert("us");
    };

    this.updateGraphics = function() {
        alert("ug");
    };  

};

我试图像这样运行它：

$(document).ready(main);

        function main() {
            var gameLoop = new GameLoop();
            gameLoop.start();
        }

发生的事情是每个“processInput”“updateStaten”和“updateGraphics”函数被调用一次（我可以看到他们显示的每个警报），但随后它停止并且我得到错误（在Firefox的错误控制台内）是

Error: TypeError: this.processInput is not a function

指向this.processInput()函数中的update行。

我只是不明白为什么，特别是因为第一次调用函数。有人可以帮忙吗？

Answer 1

您的函数运行错误this。

this根据您调用函数的方式设置在requestAnimationFrame跟注时，this将为window。

要解决此问题，您需要在闭包中保留this：

var self = this;
requestAnimationFrame(function() { self.processInput(); });

您还可以使用新的ES5 bind()功能为您执行此操作：

requestAnimationFrame(this.processInput.bind(this));

JS游戏循环使用requestAnimationFrame - 对象函数只被调用一次

1 个答案: