2

これはエラーの原因です (FF、Chrome、および ?):

JSF中出しレクリエーション

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: Illegal operation on WrappedNative prototype object

エラーは Chrome では次のとおりです - webkitRequestAnimationFrame(): Uncaught TypeError: Illegal invocation

行で：

this.requestAnimationFrame...

ログは「準備完了」ではなく「完了」を出力します

ネイティブの RAF メソッドの代わりに関数だけを使用すると、機能します (「完了」がログに記録されます)。

JSF中出しレクリエーション

RequestAnimationFrames で何が起こっていますか?

4

2 に答える 2

6

windowの関数を呼び出す場合、コンテキスト（ ）は、object（のinstance）ではなく、でthisある必要があります。bindは、その問題を解決するのに役立ちます。windowEngine

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

ライブデモ

于 2012-12-28T11:14:14.330 に答える
2

requestAnimationFrameここで述べたように、 window:のコンテキストで呼び出す必要があります: "Uncaught TypeError: Illegal invocation" in Chromethis.requestAnimationFrame.call(window, ...);

于 2012-12-28T11:18:11.273 に答える