从 JavaScript 中的循环更新 DOM

Question

我正在通过 Q 学习算法制作迷宫求解器。我有一个随机生成的宽 X 高迷宫。迷宫的每个单元格都是一个div。我有 CSS 不同类型细胞的代码。

.wall {
        background-color: red;
}
.currentPosition {
        background-color: yellow;
}

我想给不知道的朋友简单介绍一下Q Learning，基本上我们的agent（或者鼠标，你叫什么）的位置变化非常快，直到解迷宫。

我期待像上面的 gif 那样的结果。我将 'currentPosition' 添加到代理所在单元格的类列表中。

这是我的伪代码：

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')
}

我的问题从这里开始。直到循环完成浏览器冻结！所以我看不到代理的即时位置。我尝试添加 setTimeout() 但没有任何改变。如果我在 Java 中做这个项目，我会在单独的线程中做它们，但我不知道我能在 JavaScript.

中做什么

Answer 1

也许我不明白你的问题，但我是如何解释它的？你真的想看到每个过程的每一步吗？因为那时你需要潜入 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，您将看到一个白色页面，在完成所有操作后，您会看到最后一种颜色。

从 JavaScript 中的循环更新 DOM

Update DOM from loop in JavaScript

javascript

dom

q-learning