“未捕获类型"； requestAnimationFrame错误 [英] "Uncaught Type" error with requestAnimationFrame

问题描述

因此，我已经使用requestAnimationFrame编写了一个正常工作的应用程序(实际上是其中的一半).在项目变得过于复杂之前，我急于以一种面向对象的方式重写它，以便我们可以更好地实现插件(并且还可以在不更改整个应用程序的情况下修复模块).实际上，该应用程序的第一个版本确实被弄乱了，并由许多测试代码组成.

So I have written a working application (actually half of it) with requestAnimationFrame. Before the project gets too complex I'm rushing to rewrite it in an object-oriented style so we can implement plugins better (and also fix modules without changing the whole app). In fact the first version of the app was really messed up and made up from a lot of test code.

所以我有以下内容:

Aventura.prototype.update = function() {
  var av = this;
  requestAnimationFrame(av.update);

  /* ... frame code ... */
};

在控制台日志中，在requestAnimationFrame行中，我得到了"Uncaught TypeError:Type error".我知道我的浏览器具有正确的requestAnimationFrame实现，因为我完美地使用了应用程序的混乱版本.

And I get "Uncaught TypeError: Type error " in the console log, right in the requestAnimationFrame line. I know my browser has a proper requestAnimationFrame implementation since I used the messed up version of my app perfectly well.

我得出的结论是，它引发了异常，因为我正在调用的方法是调用者自己的父对象的成员(我知道这是完全相同的方法，但是问题显然不在于自进行通话，因为这就是英国皇家空军应该做的事情).有什么问题的线索吗?

I've reached the conclusion that it raises an exception because I'm calling a method that is a member of the caller's own parent object (I know it's exactly the same method, but the problem clearly isn't on self-calling since that's what RAF is supposed to do). Any clues of what's wrong?

推荐答案

这与requestAnimationFrame无关.这是一个基本的JavaScript问题，与传递函数以及this的含义有关.

This has nothing to do with requestAnimationFrame. It is a basic JavaScript issue related to passing functions in general, and the meaning of this.

人们倾向于认为对象内部具有函数值属性，例如下面的myFn

People tend to think that a function-valued property inside an object, such as myFn in the below

var myObj = {
    myFn: function() {console.log(this);}
};

某种程度上已经将myObj作为"c2>"加入"了.错误的.仅在调用功能 时分配this.如果我说myObj.myFn()，则this会变成myObj，但是我很容易说出myObj.myFn.call(otherObj)，让this成为其他名称.

somehow has myObj "baked in" as this. Wrong. this is assigned only at the time the function is called. If I say myObj.myFn(), this becomes myObj, but I could just as easily say myObj.myFn.call(otherObj) to have this be something else.

当将函数作为参数传递给setTimeout，promise或requestAnimationFrame时，这一点很重要.仅传递myObj.myFn即可传递函数，但没有关联的this. requestAnimationFrame不知道此函数来自何处以及调用什么this，因此它以this为window或null或0或undefined或由谁来调用它知道什么.这会导致错误.

This becomes important when passing functions around as parameters to setTimeout, promises, or requestAnimationFrame. Just passing myObj.myFn passes the function, but it has no associated this. requestAnimationFrame has no idea where this function came from and what this to call it with, so it calls it with a this of window, or null, or 0, or undefined, or who knows what. This causes the error.

解决问题的最简单方法是简单地说

The simplest way to fix the problem is to simply say

requestAnimationFrame(function() {av.update(); });

现在使用正确的this调用update.

一种更复杂，等效的方法是

A more sophisticated, equivalent way, would be

requestAnimationFrame(av.update.bind(av));

其他说明

我不认为您将函数本身传递给requestAnimationFrame的方式会很好.您实际上是在建立一串递归调用，最终堆栈将溢出.您需要将要在requestAnimationFrame回调上执行的逻辑与请求框架的逻辑分开.

Other note

I don't think the way you're passing the function itself to requestAnimationFrame is going to work well. You're essentially setting up a chain of recursive calls, and eventually the stack will overflow. You need to separate the logic to be executed on the requestAnimationFrame callback from the logic to request the frame.

这篇关于“未捕获类型"； requestAnimationFrame错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！