javascript - requestAnimationframe错误

Question

以下内容导致错误(FF、Chrome 和？):

JSFiddle recreation

Engine.prototype.requestAnimationFrame = window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(/* function */ callback, /* DOMElement */ element){
            window.setTimeout(callback, 1000 / 60);
};

完整的上下文是:

var Engine = function(model) {

        this.model = model;
    };

    Engine.prototype.start = function() {
        console.log("ready")
        this.requestAnimationFrame(function() {
            console.log("done");
        });
    };

    Engine.prototype.updateUi = function() {

        console.log("update ui");
        this.requestAnimationFrame(this.updateUi);
    };

    Engine.prototype.logRAF = function() {
        console.log(window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame);
        return this;
    };

    Engine.prototype.requestAnimationFrame = window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function(/* function */ callback, /* DOMElement */ element){
                window.setTimeout(callback, 1000 / 60);
            };

var engine = new Engine();
engine.logRAF().start();

FF 中的错误如下 - mozRequestAnimationFrame(): NS_ERROR_XPC_BAD_OP_ON_WN_PROTO:对 WrappedNative 原型(prototype)对象的非法操作

Chrome 中的错误如下 - webkitRequestAnimationFrame(): 未捕获的类型错误:非法调用

在线:

this.requestAnimationFrame...

日志读取打印出“ready”，但不是“done”

如果我只使用一个函数而不是本地 RAF 方法，它就可以工作(记录“完成”):

JSFiddle recreation

RequestAnimationFrames 是怎么回事？

Answer 1

当你调用window的函数时，context(this)必须是window ，而不是您的对象(Engine 的实例)。 bind将帮助您解决该问题:

Engine.prototype.requestAnimationFrame = 
        (window.requestAnimationFrame && window.requestAnimationFrame.bind(window)) ||
        (window.webkitRequestAnimationFrame && window.webkitRequestAnimationFrame.bind(window)) ||
        //etc...

live demo