requestAnimationframe 错误答案

【问题标题】：requestAnimation frame errorrequestAnimationframe 错误
【发布时间】：2023-03-03 03:00:02
【问题描述】：

以下导致错误（FF、Chrome 和？）：

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 方法，它可以工作（记录“完成”）：

JSFiddle recreation

RequestAnimationFrames 发生了什么？

【问题讨论】：

标签： javascript html animation requestanimationframe

【解决方案1】：

当您调用window 的函数时，上下文（this）必须是window，而不是您的对象（Engine 的实例）。 bind 会帮你解决这个问题：

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

live demo

【讨论】：

@PeterAjtai 很高兴有帮助。
你也可以使用(window.a || window.b || ...).bind(window)。
@pimvdb - 假设“窗口”RAF 函数方法之一可用。如果它退回到将通过错误的常规功能......但是是的，有一些捷径可以做。
我不认为它会导致错误 - 回退函数不使用this，所以使用.bind 是一个无操作的那个。
@pimvdb undefined.bind(window) 是一个错误jsfiddle.net/pajtai/RL24r - 所以它只需要包装得更好一点：

【解决方案2】：

requestAnimationFrame 应在 window 的上下文中调用：this.requestAnimationFrame.call(window, ...);，如此处所述："Uncaught TypeError: Illegal invocation" in Chrome

【讨论】：