JavaScript/HTML5 Canvas 寻路复用问题答案

【问题标题】：JavaScript/HTML5 Canvas Pathfinding Multiplexing IssueJavaScript/HTML5 Canvas 寻路复用问题
【发布时间】：2013-01-08 01:07:26
【问题描述】：

我有一个用于 HTML5 画布的 JavaScript 中的寻路脚本，似乎存在多路复用问题。

jsFiddle Demo

该脚本已从此处接受的 SO 答案中提取并略微改编：A* Start path finding in HTML5 Canvas（也有相同的错误）。

如何重现问题：只需在红色方块移动时在地图上快速单击，您就会看到方块似乎分裂或分支到每条不同的路径.

我认为正在发生的事情是，您应该注意到红色方块在分支过程中开始闪烁，实际上只是同一个方块试图同时在多个地方，导致同一个方块“传送”回来并以交替帧中的帧速率。虽然这只是一个理论，但我认为它实际上并没有产生更多的方块。

我不确定它是否与 movePlayer() 函数或 pathFinding() 函数有关。我认为我需要做的是，如果对象正在移动并且目标图块已更新，请取消任何先前的操作，而不是继续同时运行它们 - 我不知道该怎么做。

由于这最终将成为敌方 AI 脚本，因此目标图块将始终随着玩家在地图上移动而实时更新，这可能会导致此问题浮出水面。

谢谢，感谢您在调试时提供的任何帮助！

【问题讨论】：

我会尝试预先计算帧并使其平滑
@philipp 你的意思是某种帧缓冲？
至少对于视图/渲染部分
@philipp 我会检查一下方法并试一试。

标签： javascript html artificial-intelligence path-finding

【解决方案1】：

据我所知，问题出在所使用的计时器上。当您单击时，它会计算当前位置和单击位置之间的路径，然后它会启动一个计时器，使方块沿着该路径移动，并在本地存储该计时器的信息。当您再次单击时，它会启动另一个计时器而不清除旧计时器，因此它现在从两个不同的计时器同时沿着两条路径移动。它正在绘制每个计时器中的每一个动作，这可以看作是闪烁。

【讨论】：

所以你是说因为movePlayer() 递归地调用自己，如果movePlayer() 当前已经在运行，那么每次更新目标时间时都会复合？您对解决方案有何建议？
我能想到两个简单的解决方案。第一个可能最简单的方法是在新计时器启动时清除旧计时器。调用 setTimeout 时，将结果设置为全局变量（setTimeout/setInterval 返回整数定时器 ID 以供参考）。在调用 setTimeout 之前，对存储的 ID 号调用 clearTimeout，这将阻止前一个计时器完成。第二个是全局而不是本地存储路径，但是你可能仍然需要管理计时器。
它不起作用:(。var timer = (function(data, step) { window.setTimeout(function() { movePlayer(data, step) }, 60) });, canvas.onclick = function(e) { [...] clearTimeout(timer); }, function movePlayer(data, step) { [...] timer(data, step); }。和以前一样的问题。
我应该给你一个解决的版本。您可能从我的名声中可以看出，我对 StackExchange 格式有点陌生。 jsfiddle.net/9tBYj 唯一的区别是在 setTimeout 之前添加了 timerID 全局变量和额外的 clearTimeout。
实际上，它确实有效！我重新阅读了您之前的评论，这次将其设置为全局变量（而不是全局变量内的函数），然后将其设置为 window.setTimeout() 内的 movePlayer() 函数。现在它起作用了！谢谢！