我是一所高中的信息技术老师，教导学生通过JavaScript编写代码（这是我特定环境的最佳语言 - 远程教育）。
我编写了一个迷宫导航脚本，以便教授学生顺序和迭代编码技术。学生使用两个命令，移动或左转以导航迷宫 - 迷宫显示在页面的表格中。
我希望我的脚本向学生展示迷宫导航的进度，以便他们可以更轻松地识别他们的错误并纠正错误。这样做，我每次调用重绘表的函数时都使用setTimeout（）等待。问题是浏览器在显示最终结果之前等待所有命令运行和处理。这意味着学生无法看到他们的进步。
我能够让它工作的唯一方法是用alert（）替换setTimeout（），这会为每个＆＃34;步骤＆＃34;在该计划中 - 我不喜欢这个解决方案。
我已经对此做了大量研究，我发现的大多数文章似乎都包含某种繁忙的循环，但这对我不起作用，因为浏览器只是等待忙循环完成才显示结果
这可能吗？我可以获取代码来显示程序的每次迭代吗？
这是我的迷宫对象（showMaze（）函数是我一直在做的）：
/*****************************
** Maze Game **
*****************************/
"use strict";
// Create the maze object
var Maze = {
//Object global variables
char: { x: 1, y: 1 },
direction: "N",
speed: 1000,
maze: [],
err: "",
target: "dispArea",
timerID: "",
stepCnt: 0,
//Set up the default maze
defaultMaze: function ()
{
var imaze = []
imaze[0] = ["#", "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", "#"];
imaze[1] = ["#", "X", "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", "#"];
imaze[2] = ["#", " ", "#", "#", "#", "#", "#", "#", " ", " ", " ", " ", " ", " ", "#", "#", "#", "#", "#", "#"];
imaze[3] = ["#", " ", "#", "#", "#", "#", "#", " ", " ", " ", "#", " ", " ", " ", "#", "#", "#", "#", "#", "#"];
imaze[4] = ["#", " ", " ", " ", " ", " ", "#", " ", " ", "#", "#", "#", " ", " ", "#", "#", "#", "#", "#", "#"];
imaze[5] = ["#", "#", "#", "#", "#", " ", "#", " ", " ", "#", "#", "#", " ", " ", "#", "#", "#", "#", "#", "#"];
imaze[6] = ["#", "#", "#", "#", "#", " ", "#", "E", " ", "#", " ", " ", " ", " ", "#", "#", "#", "#", "#", "#"];
imaze[7] = ["#", "#", "#", "#", " ", " ", "#", "#", "#", "#", " ", " ", "#", "#", "#", "#", "#", "#", "#", "#"];
imaze[8] = ["#", "#", "#", "#", " ", " ", " ", " ", " ", " ", " ", " ", "#", "#", "#", "#", "#", "#", "#", "#"];
imaze[9] = ["#", "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", "#", "#"];
return imaze;
},
//Draw the maze on the screen
drawMaze: function ()
{
var output = "<table>";
document.getElementById(Maze.target).innerHTML = "";
for (var i = 0; i < 10; i++)
{
output += "<tr>";
for (var x = 0; x < 20; x++)
{
output += "<td>" + Maze.maze[i][x] + "</td>";
}
output += "</tr>";
}
output += "</table>";
output += "Direction: " + Maze.direction + "<br>";
output += "Character position: " + Maze.char.x + ", " + Maze.char.y + "<br>";
output += Maze.err + "<br>";
document.getElementById(Maze.target).innerHTML = output;
clearTimeout(this.timerID);
},
showMaze: function ()
{
//This doesn't work
this.timerID = setTimeout(this.drawMaze, this.speed);
//The below does work
/*is.drawMaze();
alert("Step: " + this.stepCnt);
this.stepCnt++;*/
},
blankChar: function (x, y)
{
this.maze[y][x] = " ";
},
addChar: function (x, y)
{
this.maze[y][x] = "X";
},
move: function ()
{
if (this.direction == "N")
{
if (this.checkLocation(this.char.x, (this.char.y - 1)))
{
this.blankChar(this.char.x, this.char.y);
this.char.y -= 1;
if (this.checkWin(this.char.x, this.char.y))
{
this.addChar(this.char.x, this.char.y);
this.win();
}
else
{
this.addChar(this.char.x, this.char.y);
}
}
else
{
this.err = "-------Error: That's a wall.--------";
}
}
else if (this.direction == "S")
{
if (this.checkLocation(this.char.x, (this.char.y + 1)))
{
this.blankChar(this.char.x, this.char.y);
this.char.y += 1;
if (this.checkWin(this.char.x, this.char.y))
{
this.addChar(this.char.x, this.char.y);
this.win();
}
else
{
this.addChar(this.char.x, this.char.y);
}
}
else
{
this.err = "-------Error: That's a wall.--------";
}
}
else if (this.direction == "E")
{
if (this.checkLocation((this.char.x - 1), this.char.y))
{
this.blankChar(this.char.x, this.char.y);
this.char.x -= 1;
if (this.checkWin(this.char.x, this.char.y))
{
this.addChar(this.char.x, this.char.y);
this.win();
}
else
{
this.addChar(this.char.x, this.char.y);
}
}
else
{
this.err = "-------Error: That's a wall.--------";
}
}
else if (this.direction == "W")
{
if (this.checkLocation((this.char.x + 1), this.char.y))
{
this.blankChar(this.char.x, this.char.y);
this.char.x += 1;
if (this.checkWin(this.char.x, this.char.y))
{
this.addChar(this.char.x, this.char.y);
this.win();
}
else
{
this.addChar(this.char.x, this.char.y);
}
}
else
{
this.err = "-------Error: That's a wall.--------";
}
}
this.showMaze();
},
checkLocation: function (x, y)
{
if (this.maze[y][x] == "#")
{
return false;
}
else
{
return true;
}
},
checkWin: function (x, y)
{
if (this.maze[y][x] == "E")
{
return true;
}
else
{
return false;
}
},
win: function ()
{
this.showMaze();
alert("Congratulations, you got to the end of the maze!");
return;
},
turnLeft: function ()
{
if (this.direction == "N")
{
this.direction = "E";
}
else if (this.direction == "E")
{
this.direction = "S";
}
else if (this.direction == "S")
{
this.direction = "W";
}
else
{
this.direction = "N";
}
this.showMaze();
},
init: function ()
{
this.maze = this.defaultMaze();
this.showMaze();
}
}<html>
<head>
<title>Maze game!</title>
</head>
<body>
<div id="dispArea">Test</div>
<script>
Maze.init();
Maze.turnLeft();
Maze.turnLeft();
for (var i = 0; i < 3; i++)
{
Maze.move();
}
Maze.turnLeft();
</script>
</body>
</html>