JavaScript/HTML5畫布尋路多路複用問題

Question

我在JavaScript中有一個尋找HTML5 canvas的尋路腳本，看起來有多路複用的問題。

jsFiddle Demo

劇本拍攝並稍微改編自接受蘇答案在這裏：A* Start path finding in HTML5 Canvas（其中也有同樣的錯誤）。

如何複製問題：只需在紅色正方形運動時在地圖上快速點擊，即可看到正方形分裂或分支到每個不同路徑。

我認爲發生的事情是，你應該注意到紅色方塊在分支過程中開始閃爍，它實際上只是同一個方塊試圖同時在多個地方，導致同一個方塊「傳送」回來並以交替幀的幀速率出現。這只是一個理論，但我認爲它實際上並沒有產生更多的方塊。

我不確定它是否與movePlayer()函數或pathFinding()函數有關。我認爲我需要做的是，如果對象正在移動並且目標磁貼已更新，請取消之前的任何操作，而不是繼續同時運行它們 - 我不知道該怎麼做。由於這將最終成爲敵人AI腳本，因此當玩家在地圖上移動時，目標圖塊將始終實時更新，這可能會導致此問題出現。

謝謝，我感謝任何幫助調試！

Answer 1

從我可以告訴，問題是與定時器正在使用。當您單擊時，它將計算當前位置與您單擊的位置之間的路徑，然後啓動一個計時器，使該方形沿該路徑移動，爲該計時器本地存儲信息。當你再次點擊時，它會啓動另一個定時器而不清除舊定時器，所以它現在同時從兩個不同的定時器沿着兩條路徑移動。它正在繪製每個計時器的每個動作，這可以看作是閃爍。