javascript - 在 vanilla JS 中执行脚本期间更新 HTML 元素的内容

Question

我正在编写简单的数独求解器作为练习，我想我将通过在 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;
  }
}

我尝试将 fillBoard() 函数调用放入 solve() 中，但这显然不起作用，因为我只得到以下形式的最终结果解决了网格。我也尝试过使用 setInterval(fillBoard, 100) 但 solve() 函数执行速度太快。

如何通过在每次 solve() 调用后更新 HTML 来实现整个求解过程的“增量”显示？

我正在尝试得到这样的东西:https://www.youtube.com/watch?v=ChjQRIhH414但我正在从左到右、从上到下填充棋盘

当前解决方案:Codepen

Answer 1

你会想要减慢你的 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) });
}

如果需要，您可以在给定的延迟上将 requestAnimationFrame 替换为 setTimeout。您可以将其设置为 1-2 秒或其他时间，以查看它是否为您提供所需的结果。