从 JavaScript 中的循环更新 DOM
[英]Update DOM from loop in JavaScript
问题描述
I am making a maze solver via Q Learning algorithm.
我正在通过 Q Learning 算法制作迷宫求解器。 I have a width X height maze that is generated randomly.我有一个随机生成的宽度 X 高度迷宫。 Each cell of the maze is a div.迷宫的每个单元格都是一个 div。 I have CSS code for different type cells.我有不同类型单元格的 CSS 代码。
.wall {
background-color: red;
}
.currentPosition {
background-color: yellow;
}
I want to tell Q Learning briefly for those who don't know, basically our agent(or mouse, what do you call) changes its position very fastly until solve the maze.想简单的告诉Q Learning给不知道的人，基本上我们的agent（或者鼠标，你叫什么）改变它的position非常快，直到解决迷宫。
I'm expecting a result like the gif above.我期待像上面的 gif 这样的结果。 I add 'currentPosition' to classlist of the cell where the agent is.我将“currentPosition”添加到代理所在单元格的类列表中。
Here the my pseudo code:这是我的伪代码：
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')
}
My problem starts here.我的问题从这里开始。 Until the loops finishes the browser freezes.直到循环完成浏览器冻结。 So I can't see the instant position of agent.所以我看不到agent的即时position。 I tried add setTimeout() but nothing has changed.我尝试添加setTimeout()但没有任何改变。 If I was doing this project in Java I would do them in separate threads but I don't know what can I do in JavaScript.如果我在 Java 中执行此项目，我会在单独的线程中执行它们，但我不知道在 JavaScript 中可以做什么。
1 个解决方案
解决方案1
2 已采纳 2021-05-18 20:32:52
Maybe I don't understand your question but how I interpreted it you actually want to see every step of every process?也许我不明白你的问题，但我是如何解释它的，你实际上想看到每个过程的每一步？ Because then you need to dive in Async/Await.因为那时您需要深入了解 Async/Await。 This is an example you can use in your code base.这是您可以在代码库中使用的示例。 Here I create a simple 3x3 grid and I change the background color while looping.在这里，我创建了一个简单的 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>
The sleep function is just to simulate calculations and to show the step after the change. sleep function 只是为了模拟计算和显示更改后的步骤。 Without the Async/Await you will see a white page and after everything is done then you see the last color.如果没有 Async/Await，您将看到一个白页，并且在一切都完成后，您会看到最后一种颜色。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.