requestAnimationFrame附加到App对象而不是Window

时间:2012-09-25 21:22:21

标签: javascript html5 canvas requestanimationframe

我已设置以下jsFiddle http://jsfiddle.net/ZbhQY/4/

我使用一个小的requestAnimationFrame polyfill并将结果返回到window.reqeuestAnimFrame,这一切都正常,所有对此函数的调用都按预期工作。

如果我改变它以返回到game.reqeuestAnimFrame并将对window.reqeuestAnimFrame的所有调用替换为新的game.reqeuestAnimFrame它将不再有效。

有人可以解释为什么会出现这种情况以及我能做些什么才能使这项工作成功? 感谢。

1 个答案:

答案 0 :(得分:1)

requestAnimationFrame必须具有window的上下文才能正常运行。

您可以将您的通话重写为:

game.requestAnimFrame.call(win, game.run);

它将按预期运行。

您遇到的错误是因为requestAnimationFrame期望其上下文(this)为window,而是其上下文为game

http://jsfiddle.net/ZbhQY/5/

或者,您可以像这样重写requestAnimFrame getter:

game.requestAnimFrame = (function() {
        var rAF = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };

        return function(callback){
            rAF.call(window, callback);
        };            
    })();

这样您就可以按预期调用game.requestAnimFrame(game.run)