javascript - Java在循环中第二次执行函数时引发未定义的错误(Javascript throwing undefined error on second execution of function in loop)

Question

I am drawing shapes onto a canvas with JS and jQuery.

(我正在使用JS和jQuery在画布上绘制形状。)

I have a render loop function that redraws the shapes using information from an object.

(我有一个渲染循环功能，可以使用来自对象的信息来重绘形状。)

This object has been defined and the code runs through the loop once, then the object becomes undefined and I am lost to why.

(已经定义了该对象，并且代码一次遍历了循环，然后该对象变为未定义，我迷失了为什么。)

I don't do much JS, so I'm not sure if I'm missing something obvious.

(我没有做太多的JS，所以我不确定是否缺少明显的东西。)

I've checked a load of other threads but can't seem to find why my value is changing to an undefined state after having been defined.

(我检查了其他线程的负载，但似乎无法找到为什么我的值在定义后变为未定义状态。)

Below is a simplified version of the code:

(下面是该代码的简化版本：)

$document.ready{

    const canvas = $canvas;
    const context = canvas.getContext();

    const 2dArray = [ [...], ..., [...] ];
    const object = { coords: {x:5, y:5}, shape: 2dArray};
    render(canvas, context, object);
});

function render(canvas, context, object){
    drawFunction(canvas, context, object);
    requestAnimationFrame(render);
};

function drawFunction(canvas, context , object){
    drawShape(context, object.coords, object.shape);
};

Quick simplified runthrough:

(快速简化的贯穿过程：)

• drawShape(): iterates through a 2D array to form a "shape" from a 3x3 grid of squares.

  (drawShape（）：遍历2D数组以从3x3正方形网格形成“形状”。)

• drawFunction(): executes drawShape() and a few other bits.

  (drawFunction（）：执行drawShape（）和其他一些功能。)

• render(): recursive function to continously draw & redraw canvas.

  (render（）：递归函数，以连续绘制和重新绘制画布。)

What is happening is that drawFunction() is executing once in the render loop, then once it goes to execute a second time, and execute drawShape() a second time, "object" has now become undefined.

(发生的情况是drawFunction（）在render循环中执行一次，然后再次执行一次，然后再次执行drawShape（）时，“对象”现在变得不确定。)

I don't understand this as it has already been defined and used?

(我不明白，因为它已经被定义和使用了？)

The shape is being drawn once but then something goes wrong.

(形状被吸一次，但随后出现问题。)

Any help appreciated, feel free to tell me I'm a moron having missed something stupid and simple.

(任何帮助表示赞赏，请随时告诉我，我是个笨蛋，已经错过了一些愚蠢而简单的事情。)

  ask by CodeMonkey210399 translate from so

Answer 1

requestAnimationFrame calls the given function without any arguments.

(requestAnimationFrame调用给定的函数，不带任何参数。)

So render() function won't receive any parameters on the second time.

(因此render()函数不会在第二次接收任何参数。)

To solve the problem, you could use Function.prototype.bind to bind arguments on the function.

(要解决此问题，可以使用Function.prototype.bind绑定函数上的参数。)

function render(canvas, context, object){
    drawFunction(canvas, context, object);
    requestAnimationFrame(render.bind(null, canvas, context, object));
}