Question

我用路线查找器制作了一个迷宫应用程序。当它沿着路线行进时，它会调用绘制画布，突出显示每个单元格。然而最终发生的事情是阻塞直到它完全完成然后绘制到画布。大致如此：

Path.prototype.travelTo (cell) {
  this.previous = this.cell;
  this.cell = cell;
  this.cell.fill = 'yellow';
  this.maze.draw();
  var choice = findChoice();
  this.travelTo(choice);
};

迷宫类跟踪所有单元格，其绘制函数循环遍历每个单元格，调用单元格自己的绘制函数。

我做了一个模拟问题的快速jsfiddle（http://jsfiddle.net/amctammany/99VVu/）。在这里，它通过setTimeout递归调用自身从一个单元格传输到下一个单元格。结果是相同的，它立即填充所有细胞，甚至没有等待任何时间。

任何帮助都将不胜感激。

Answer 1

我看了你的jsfiddle，我注意到的第一件事就是你的setTimeout：

window.setTimeout(fillNext(i + 1), 500);

但可能你打算这样做：

window.setTimeout(function() {fillNext(i + 1)}, 500);

您应该将fillNext(i+1)设置为setTimeout的回调，不要使用fillNext(i+1)的返回值作为window.setTimeout()

的参数

Answer 2

更新以下行，如下所示。然后你可以看到动画。

  "window.setTimeout(fillNext(i + 1), 500);"  To "window.setTimeout(fillNext, 100,(i + 1));"

我已经更新了小提琴。您现在可以查看它。

使用setTimeout在画布中顺序填充形状

2 个答案: