我正在使用 JS 和 jQuery 在 Canvas 上绘制形状。我有一个渲染循环函数,可以使用对象中的信息重新绘制形状。该对象已被定义,代码运行一次循环,然后该对象变为未定义,我不知道为什么。我不做太多 JS,所以我不确定我是否遗漏了一些明显的东西。我已经检查了其他线程的负载,但似乎无法找到为什么我的值在定义后更改为未定义状态。下面是代码的简化版本:
$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);
};
快速简化的运行:
- drawShape():迭代 2D 数组,从 3x3 的正方形网格形成一个“形状”。
- drawFunction():执行drawShape()和一些其他位。
- render():连续绘制和重绘 Canvas 的递归函数。
发生的情况是,drawFunction() 在渲染循环中执行一次,然后一旦它执行第二次,并再次执行drawShape(),“object”现在变得未定义。我不明白这一点,因为它已经被定义和使用了?形状正在绘制一次,但随后出现问题。
如果有任何帮助,请随时告诉我,我是个白痴,错过了一些愚蠢而简单的事情。
最佳答案
requestAnimationFrame
不带任何参数调用给定函数。所以 render()
函数第二次不会接收任何参数。要解决这个问题,您可以使用 Function.prototype.bind将参数绑定(bind)到函数上。
function render(canvas, context, object){
drawFunction(canvas, context, object);
requestAnimationFrame(render.bind(null, canvas, context, object));
}
关于Javascript 在循环中第二次执行函数时抛出未定义的错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59112561/