Javascript 如何解决算法可视化中的问题

我想提出一个问题，我们在迷宫中找到从（0,0）单元到（m-1，n-1）单元的路径，其间有一些障碍物。
我使用了递归回溯算法来解决这个问题，我只是想做一些可视化，让我们可以看到在迷宫中行进时路径是如何走的。
我看到了那个问题

现在我已经用javascript实现了它，我将我们访问的单元格涂成蓝色，如果我们回溯，我会再次删除颜色，但是一切都发生得非常快，因为我们看不到任何事情发生，所以我尝试使用

sleep（）

函数会有一些延迟，但我认为我没有正确使用它们，因为任何随机模式显示的路径都不正确

如果有人能帮我解决这个问题，那将是一个很大的帮助。
你可以检查我的问题

我查找路径的算法是：

let getMazePath = async (maze, r, c, ans) => {
  if (
    r < 0 ||
    c < 0 ||
    r >= maze.length ||
    c >= maze[0].length ||
    maze[r][c] == 1 ||
    visited[r][c] == 1
  )
    return;

  if (r == maze.length - 1 && c == maze[0].length - 1) {
    document.getElementById("path-display").innerHTML =
      "Path is: '" + ans + "'";
    console.log("Path is: '" + ans + "'");
    return;
  }

  let currSq = document.getElementById(r + "_" + c);
  currSq.classList.add("visited-square");
  await sleep(1000);
  visited[r][c] = 1;

  getMazePath(maze, r - 1, c, ans + "t");
  getMazePath(maze, r, c - 1, ans + "l");
  getMazePath(maze, r + 1, c, ans + "d");
  getMazePath(maze, r, c + 1, ans + "r");

  visited[r][c] = 0;
  currSq.classList.remove("visited-square");
  await sleep(1000);
};

function sleep(ms){
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  })
}

让getMazePath=async（迷宫、r、c、ans）=>{
如果(
r<0||
c<0||
r>=迷宫长度||
c>=迷宫[0]。长度||
迷宫[r][c]==1||
已访问[r][c]==1
)
返回；
如果（r==maze.length-1&&c==maze[0]。length-1）{
document.getElementById（“路径显示”）.innerHTML=
路径是：“+ans+”；
log（“路径为：“+ans+””）；
返回；
}
设currSq=document.getElementById（r+“”+c）；
currSq.classList.add（“参观广场”）；
等待睡眠（1000）；
访问量[r][c]=1；
getMazePath（迷宫，r-1，c，ans+“t”）；
getMazePath（迷宫，r，c-1，ans+“l”）；
getMazePath（迷宫，r+1，c，ans+d）；
getMazePath（迷宫，r，c+1，ans+“r”）；
访问量[r][c]=0；
currSq.classList.remove（“参观广场”）；
等待睡眠（1000）；
};
功能睡眠（ms）{
返回新承诺（（解决）=>{
设置超时（解析，毫秒）；
})
}

您忘记了等待递归调用

通过前缀

getMazePath

calls by

wait

修复它：

await getMazePath(maze, r - 1, c, ans + "t");
await getMazePath(maze, r, c - 1, ans + "l");
await getMazePath(maze, r + 1, c, ans + "d");
await getMazePath(maze, r, c + 1, ans + "r");

现场观看

---

当它找到路径时，您可能还想停止它

为此，请返回答案并检查：

let getMazePath = async (maze, r, c, ans) => {
  if (
    r < 0 ||
    c < 0 ||
    r >= maze.length ||
    c >= maze[0].length ||
    maze[r][c] == 1 ||
    visited[r][c] == 1
  )
    return; 

  if (r == maze.length - 1 && c == maze[0].length - 1) {
    document.getElementById("path-display").innerHTML =
      "Path is: '" + ans + "'";
    console.log("Path is: '" + ans + "'");
    return ans;
        // ^^^
  }

  let currSq = document.getElementById(r + "_" + c);
  currSq.classList.add("visited-square");
  await sleep(1000);
  visited[r][c] = 1;

  {
    const res = await getMazePath(maze, r - 1, c, ans + "t");
    if(res) return res
  }
  {
    const res = await getMazePath(maze, r, c - 1, ans + "l");
    if(res) return res
  }
  {
    const res = await getMazePath(maze, r + 1, c, ans + "d");
    if(res) return res
  }
  {
    const res = await getMazePath(maze, r, c + 1, ans + "r");
    if(res) return res
  }
  visited[r][c] = 0;
  currSq.classList.remove("visited-square");
  await sleep(1000);
};

让getMazePath=async（迷宫、r、c、ans）=>{
如果(
r<0||
c<0||
r>=迷宫长度||
c>=迷宫[0]。长度||
迷宫[r][c]==1||
已访问[r][c]==1
  )
返回；
如果（r==maze.length-1&&c==maze[0]。length-1）{
document.getElementById（“路径显示”）.innerHTML=
路径是：“+ans+”；
log（“路径为：“+ans+””）；
返回ans；
        // ^^^
  }
设currSq=document.getElementById（r+“”+c）；
currSq.classList.add（“参观广场”）；
等待睡眠（1000）；
访问量[r][c]=1；
  {
const res=wait getMazePath（迷宫，r-1，c，ans+t）；
如果（res）返回res
  }
  {
const res=wait getMazePath（迷宫，r，c-1，ans+“l”）；
如果（res）返回res
  }
  {
const res=等待获取迷宫路径（迷宫，r+1，c，ans+d）；
如果（res）返回res
  }
  {
const res=等待获取迷宫路径（迷宫，r，c+1，ans+r）；
如果（res）返回res
  }
访问量[r][c]=0；
currSq.classList.remove（“参观广场”）；
等待睡眠（1000）；
};

---

现场观看

你能告诉我为什么在递归调用修复之前添加wait吗？我对async await了解不多。@sachuverma，因为它是对异步函数的调用。异步函数在被调用后立即返回，并返回一个所谓的Promise对象，使用该对象可以检查调用的状态，但异步函数的执行是异步进行的（因此命名，对吗？）<代码>等待暂停异步函数的执行，直到给定的承诺完成。如果没有这些

wait

s，函数只启动递归调用，而不等待它们完成。多个并发执行的函数改变了相同的对象，这可能会造成很大的混乱。