從 JavaScript 中的循環更新 DOM

Question

我正在通過 Q Learning 算法制作迷宮求解器。 我有一個隨機生成的寬度 X 高度迷宮。 迷宮的每個單元格都是一個 div。 我有不同類型單元格的 CSS 代碼。

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

想簡單的告訴Q Learning給不知道的人，基本上我們的agent（或者鼠標，你叫什么）改變它的position非常快，直到解決迷宮。

我期待像上面的 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')
}

我的問題從這里開始。 直到循環完成瀏覽器凍結。 所以我看不到agent的即時position。 我嘗試添加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 function 只是為了模擬計算和顯示更改后的步驟。 如果沒有 Async/Await，您將看到一個白頁，並且在一切都完成后，您會看到最后一種顏色。

從 JavaScript 中的循環更新 DOM

問題描述

1 個解決方案

解決方案1
2 已采納 2021-05-18 20:32:52

從 JavaScript 中的循環更新 DOM

問題描述

1 個解決方案

解決方案1 2 已采納 2021-05-18 20:32:52

解決方案1
2 已采納 2021-05-18 20:32:52