如何解决在 JavaScript 中从循环更新 DOM
我正在通过 Q 学习算法制作迷宫求解器。我有一个随机生成的宽 X 高迷宫。迷宫的每个单元格都是一个 div。我有不同类型单元格的 CSS 代码。
req,err := http.NewRequestWithContext(ctx,...)
if err != nil {...}
我想简单地告诉Q Learning给不知道的人，基本上我们的agent（或鼠标，你叫什么）会非常迅速地改变自己的位置，直到解开迷宫。
我期待像上面的 gif 那样的结果。我将“currentPosition”添加到代理所在单元格的类列表中。
这是我的伪代码：
.wall {
background-color: red;
}
.currentPosition {
background-color: yellow;
}
我的问题从这里开始。直到循环完成浏览器冻结！所以我看不到代理的即时位置。我尝试添加 trainAgent()
function trainAgent(){
for(let i = 0; i < generation number(like 1000000); i++){
while(until agent goes to the goal or walls){
// Do some calculations
// Update some numbers in q matrix
// Change current position of agent and add 'currentPosition' class to the new div
}
}
}
function setCurrentPoint(row,column){
if(currentPoint.div)
currentPoint.div.classList.remove("currentPoint")
currentPoint.row = row
currentPoint.column = column
currentPoint.div = mapMatrix[row][column]
currentPoint.div.classList.add('currentPoint')
}
但没有任何改变。如果我用 Java 做这个项目，我会在单独的线程中完成它们，但我不知道我能用 JavaScript 做什么。
解决方法
也许我不明白你的问题，但我是如何解释它的，你真的想看到每个过程的每一步？因为那时您需要深入了解 Async/Await。这是您可以在代码库中使用的示例。在这里，我创建了一个简单的 3x3 网格，并在循环时更改背景颜色。
async function runner() {
const elements = document.getElementsByClassName("tableItem");
let color = "hotpink";
for (let j = 0; j < 300; j++) {
for (let i = 0; i < 9; i++) {
const element = elements[i];
window.requestAnimationFrame(() => {
element.style.backgroundColor = color;
} );
await sleep();
}
color = getRandomColor();
}
}
async function sleep() {
return new Promise((resolve) => setTimeout(resolve,300));
}
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}.table {
display: grid;
grid-template-columns: repeat(3,100px);
grid-template-rows: repeat(3,100px);
gap: 10px;
}
.table div {
background-color: red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./test.css">
<script src="./test.js"></script>
</head>
<body onload="runner()">
<div class="table">
<div class="tableItem"></div>
<div class="tableItem"></div>
<div class="tableItem"></div>
<div class="tableItem"></div>
<div class="tableItem"></div>
<div class="tableItem"></div>
<div class="tableItem"></div>
<div class="tableItem"></div>
<div class="tableItem"></div>
</div>
</body>
</html>sleep 函数只是为了模拟计算和显示更改后的步骤。如果没有 Async/Await，您将看到一个白页，一切完成后您会看到最后一个颜色。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
