Javascript 更新HTML元素'；在vanilla JS中执行脚本期间的内容

我正在编写简单的数独解算器作为练习，我想我会通过在9x9网格上一步一步地显示来展示整个过程

我使用带有嵌套div的HTML表来显示游戏板（可能不相关），并使用递归函数来解决预编种子数独。我的解决方案现在处于“意大利面条”状态，因此下面我为您提供我所拥有的伪代码：

function fillBoard() {
  for(let i = 0; i < 9; i++) {
    for(let j = 0; j < 9; j++) {
      const cell = document.querySelector(`div[data-row="${i}"][data-column="${j}"]`);
      cell.innerHTML = gameState.solution[i][j];
    }
  }
}

function solve(row, column) {
  /* simplified, it's working :) */
  for(let guess = 1; guess < 10; guess++) {
    this.solution[row][column] = guess; <--- SHOW THIS STEP TO USER
    let conflicts = checkConflicts(row, column)           
    if(!conflicts) {
      let emptyCell = this.findNextEmptyCell(row, column);
      if(emptyCell) {
        let result = this.solve(emptyCell.i, emptyCell.j);
        if(!result) continue;
        else return true;
      }
      return true;
    }            
    else continue;
  }
}

函数填充板（）{
for（设i=0；i<9；i++）{
for（设j=0；j<9；j++）{
const cell=document.querySelector（`div[data row=“${i}”][data column=“${j}”]`）；
cell.innerHTML=gameState.solution[i][j]；
}
}
}
函数求解（行、列）{
/*简而言之，它正在工作：）*/
对于（让猜测=1；猜测<10；猜测++）{
此。解决方案[行][列]=guess；你会想减慢html渲染过程，这对我来说是一种动画。你可以研究这种方法，如果你想的话，也许可以限制它。没有完整的示例，我无法确定是否运行它。我会给你一些伪代码，作为我测试它的开始方式的响应，希望这能为你指明方向正确的方向：

function fillBoard(i=0, j=0) {
  const cell = document.querySelector(`div[data-row="${i}"][data-column="${j}"]`);
  cell.innerHTML = gameState.solution[i][j];

  j++;
  if( j >= 9) { j = 0; i++; }
  if(i < 9)
  requestAnimationFrame(function() { fillBoard(i,j) });
}

功能填充板（i=0，j=0）{
const cell=document.querySelector（`div[data row=“${i}”][data column=“${j}”]`）；
cell.innerHTML=gameState.solution[i][j]；
j++；
如果（j>=9）{j=0；i++；}
如果（i<9）
requestAnimationFrame（函数（）{fillBoard（i，j）}）；
}

如果您愿意，您可以在给定的延迟时间内将requestAnimationFrame替换为setTimeout。您可以将其设置为1-2秒或其他时间，以查看它是否提供了您所需的结果。
未优化，但可以使用上述注释中的@loctrice建议作为示例。仍在寻找此问题的其他解决方案


console.clear（）；
让状态=[]；
设x=0；
document.addEventListener（“DOMContentLoaded”，function（））{
const start=document.getElementById（“start”）；
常量检查=document.getElementById（“检查”）；
const sudoku=document.getElementById（“sudoku”）；
功能填充板（索引）{
log（`Displaying${index}/${states.length}`）；
for（设i=0；i<9；i++）{
for（设j=0；j<9；j++）{
常量单元格=document.querySelector(
`div[data row=“${i}]”[data column=“${j}]`
);
cell.innerHTML=
州[指数][i][j]==0？”“：州[指数][i][j]；
}
}
}
类数独{
检查行（行）{
for（设i=0；i<9；i++）{
设number=this.solution[row][i]；
如果（！number）继续；
for（设j=0；j<9；j++）{
如果（i==j）继续；
const challenge=this.solution[row][j]；
if（number==质询）返回编号；
}
}
返回false；
}
检查列（列）{
for（设i=0；i<9；i++）{
设number=this.solution[i][column]；
如果（！number）继续；
for（设j=0；j<9；j++）{
如果（i==j）继续；
const challenge=this.solution[j][column]；
if（number==质询）返回编号；
}
}
返回false；
}
复选框（方框）{
常量行修改器=数学楼层（方框/3）*3；
常量colModifier=（框%3）*3；
for（设i=0；i<3；i++）{
for（设j=0；j<3；j++）{
设number=this.solution[i+rowModifier][j+colModifier]；
如果（！number）继续；
for（设x=0；x<3；x++）{
for（设y=0；y<3；y++）{
如果（x==i&&y==j）继续；
const challenge=this.solution[x+rowModifier][y+colModifier]；
if（number==质询）返回编号；
}
}
}
}
返回false；
}
求解（行、列、数组）{
for（让guess=1；guess<11；guess++）{
如果（猜测=10）{
此.solution[行][列]=0；
返回false；
}
此.solution[row][column]=guess；//[…a]）；
array.push（状态）；
const rowError=this.checkRow（行）；
const columnError=此.checkColumn（列）；
const boxError=this.checkBox(
3*数学楼层（第3行）+数学楼层（第3列）
);
如果（！rowError&&！columnError&&！boxError）{
//查找下一个空单元格
设emptyCell=this.findNextEmptyCell（行、列）；
如果（空呼叫）{
让result=this.solve（emptyCell.i，emptyCell.j，数组）；
如果（！result）继续；
否则返回true；
}
返回true；
}否则继续；
}
}
findNextEmptyCell（行、列）{
for（设i=row；i<9；i++）{
如果（列==8）列=0；
for（设j=column；j<9；j++）{
如果（本解决方案[i][j]）继续；
else返回{i:i，j:j}；
}
列=0；
}
返回false；
}
发电机箱（箱号）{
让数字=[]；
for（设i=0；i<9；i++）{
数字推送（i）；
}
for（设i=0；i<3；i++）{
for（设j=0；j<3；j++）{
常量长度=number.length；
const index=Math.floor（Math.random（）*长度）；
常量编号=编号。拼接（索引，1）；
常量行=i+箱号*3/4；
常数col=j+箱号*3/4；
此.solution[row][col]=parseInt（number）+1；
}
}
}
初始化（）{
这个。解决方案=[]；
for（设i=0；i<9；i++）{
这个.solution.push（[]）；
for（设j=0；j<9；j++）{
此.解[i][j]=0；
}
}
for（设i=0；i<3；i++）{
这台发电机箱（i*4）；
}
}
}
让gameState=新数独（）；
gameState.initialize（）；
start.onclick=function（）{
游戏状态。求解（0，3，状态）；
setInterval（函数（）{if（x