JavaScript:我传入一个列表，尝试访问索引，它说变量未定义

Question

我编写了以下内容来测试 Canvas 上的绘图:

function draw3(cg, ctx) {
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.stroke(cg);
}
function march(i, gl, ct) {
  draw3(gl[i], ct);
  setTimeout(march((i+1)%2), 40);
}
function draw3main() {
  var canvas = document.getElementById('canvas3');
  var ctx = canvas.getContext('2d');

  var coolGuy = new Path2D("M10 10 h 50 v 50 h -50 Z");
  var coolGuy2 = new Path2D("M11 11 h 50 v 50 h -50 Z");
  var guysList = [coolGuy, coolGuy2];

  march(0, guysList, ctx);
}

当我运行它时，没有任何内容被绘制，并且浏览器控制台在 march 函数中的行上报告“gl”未定义，该函数读取 draw3(gl[i], ct);.但它是传递给函数的参数，因此应该定义它。无法追踪错误，有人可以帮忙吗？

Answer 1

改变你的

setTimeout(march((i+1)%2), 40);

至

setTimeout(march, 40, (i + 1) % gl.length, gl, ct);

或

setTimeout(function() {
  march((i + 1) % gl.length, gl, ct);
}, 40);

现在您只需使用一个参数 (i+1)%2 立即调用 march()。

<小时/>

总的来说，它看起来像这样:

function draw3(cg, ctx) {
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.stroke(cg);
}

function march(i, gl, ct) {
  draw3(gl[i], ct);
  setTimeout(march, 40, (i + 1) % gl.length, gl, ct);
}

function draw3main() {
  var canvas = document.getElementById('canvas3');
  var ctx = canvas.getContext('2d');

  var coolGuy = new Path2D("M10 10 h 50 v 50 h -50 Z");
  var coolGuy2 = new Path2D("M11 11 h 50 v 50 h -50 Z");
  var guysList = [coolGuy, coolGuy2];

  march(0, guysList, ctx);
}

draw3main();

<canvas id="canvas3" width="72" height="72"></canvas>