Обновление содержимого HTML-элемента во время выполнения скрипта в vanilla JS

Question

Я пишу простой решатель судоку в качестве упражнения, и я подумал, что я покажу весь процесс, отображая его шаг за шагом на сетке 9x9.

Я использую таблицу HTML с вложенными div дляотображение игрового поля (вероятно, не актуально) и рекурсивная функция для решения заданного судоку.Мое решение сейчас находится в состоянии "спагетти", поэтому ниже я даю вам псевдокод для того, что у меня есть:

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() выполняется слишком быстро.

Как можно добиться «инкрементного» отображения всего процесса решения путем обновления HTML после каждого вызова solve()?

Я пытаюсь получить что-то вроде этого: https://www.youtube.com/watch?v=ChjQRIhH414 но я заполняю доску слева направо, сверху вниз

Текущее решение: Codepen

Answer 1

Неоптимизированный, но работающий пример, следуя советам @loctrice из комментариев выше.Все еще ищу другие решения этой проблемы.

console.clear();

let states = [];
let x = 0;

document.addEventListener("DOMContentLoaded", function() {
  const start = document.getElementById("start");
  const check = document.getElementById("check");
  const sudoku = document.getElementById("sudoku");

  function fillBoard(index) {
    console.log(`Displaying ${index}/${states.length}`);
    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 =
          states[index][i][j] == 0 ? "" : states[index][i][j];        
      }
    }
  }

  class Sudoku {
    checkRow(row) {
      for (let i = 0; i < 9; i++) {
        let number = this.solution[row][i];
        if (!number) continue;

        for (let j = 0; j < 9; j++) {
          if (i == j) continue;
          const challenge = this.solution[row][j];
          if (number == challenge) return number;
        }
      }
      return false;
    }

    checkColumn(column) {
      for (let i = 0; i < 9; i++) {
        let number = this.solution[i][column];
        if (!number) continue;

        for (let j = 0; j < 9; j++) {
          if (i == j) continue;
          const challenge = this.solution[j][column];
          if (number == challenge) return number;
        }
      }
      return false;
    }

    checkBox(box) {
      const rowModifier = Math.floor(box / 3) * 3;
      const colModifier = (box % 3) * 3;
      for (let i = 0; i < 3; i++) {
        for (let j = 0; j < 3; j++) {
          let number = this.solution[i + rowModifier][j + colModifier];
          if (!number) continue;

          for (let x = 0; x < 3; x++) {
            for (let y = 0; y < 3; y++) {
              if (x == i && y == j) continue;
              const challenge = this.solution[x + rowModifier][y + colModifier];
              if (number == challenge) return number;
            }
          }
        }
      }
      return false;
    }

    solve(row, column, array) {
      for (let guess = 1; guess < 11; guess++) {
        if (guess == 10) {
          this.solution[row][column] = 0;
          return false;
        }
        this.solution[row][column] = guess; // <=== SHOW ENTIRE BOARD HERE
        let state = this.solution.map(a => [...a]);
        array.push(state);
        const rowError = this.checkRow(row);
        const columnError = this.checkColumn(column);
        const boxError = this.checkBox(
          3 * Math.floor(row / 3) + Math.floor(column / 3)
        );
        if (!rowError && !columnError && !boxError) {
          // find next empty cell
          let emptyCell = this.findNextEmptyCell(row, column);
          if (emptyCell) {
            let result = this.solve(emptyCell.i, emptyCell.j, array);
            if (!result) continue;
            else return true;
          }
          return true;
        } else continue;
      }
    }

    findNextEmptyCell(row, column) {
      for (let i = row; i < 9; i++) {
        if (column == 8) column = 0;
        for (let j = column; j < 9; j++) {
          if (this.solution[i][j]) continue;
          else return { i: i, j: j };
        }
        column = 0;
      }
      return false;
    }

    generateBox(boxNumber) {
      let numbers = [];
      for (let i = 0; i < 9; i++) {
        numbers.push(i);
      }

      for (let i = 0; i < 3; i++) {
        for (let j = 0; j < 3; j++) {
          const length = numbers.length;
          const index = Math.floor(Math.random() * length);
          const number = numbers.splice(index, 1);
          const row = i + boxNumber * 3 / 4;
          const col = j + boxNumber * 3 / 4;
          this.solution[row][col] = parseInt(number) + 1;
        }
      }
    }

    initialize() {
      this.solution = [];

      for (let i = 0; i < 9; i++) {
        this.solution.push([]);
        for (let j = 0; j < 9; j++) {
          this.solution[i][j] = 0;
        }
      }

      for (let i = 0; i < 3; i++) {
        this.generateBox(i * 4);
      }
    }
  }

  let gameState = new Sudoku();
  gameState.initialize();
  
  start.onclick = function() {
    gameState.solve(0, 3, states);
    window.setInterval(function() {if(x < states.length) fillBoard(x++);}, 15);
  };

  check.onclick = function() {
    for (let i = 0; i < 9; i++) {
      let error = gameState.checkRow(i);
      if (error) {
        for (let j = 0; j < 9; j++) {
          const cell = document.querySelector(
            `div[data-row="${i}"][data-column="${j}"]`
          );
          cell.classList.add("incorrect-area");
          if (cell.innerHTML == error) cell.classList.add("incorrect");
        }
        return;
      }

      error = gameState.checkColumn(i);
      if (error) {
        const cells = document.querySelectorAll(`div[data-column="${i}"]`);
        cells.forEach(c => {
          c.classList.add("incorrect-area");
          if (c.innerHTML == error) c.classList.add("incorrect");
        });
        return;
      }

      error = gameState.checkBox(i);
      if (error) {
        const cells = document.querySelectorAll(`div[data-box="${i}"]`);
        cells.forEach(c => {
          c.classList.add("incorrect-area");
          if (c.innerHTML == error) c.classList.add("incorrect");
        });
        return;
      }
    }
  };

  for (let i = 0; i < 9; i++) {
    const row = document.createElement("tr");
    row.classList.add("row");

    for (let j = 0; j < 9; j++) {
      let td = document.createElement("td");
      let cell = document.createElement("div");
      cell.classList.add("cell");

      cell.dataset.row = i;
      cell.dataset.column = j;

      let a = Math.floor(i / 3);
      let b = Math.floor(j / 3);
      cell.dataset.box = 3 * a + b;

      cell.innerHTML =
        gameState.solution[i][j] == "0" ? "" : gameState.solution[i][j];

      if (!cell.innerHTML)
        cell.onclick = function(e) {
          const row = e.target.dataset.row;
          const col = e.target.dataset.column;

          gameState.solution[row][col] =
            ++gameState.solution[row][col] > 9
              ? 0
              : gameState.solution[row][col];
          cell.innerHTML =
            gameState.solution[row][col] == "0"
              ? ""
              : gameState.solution[row][col];

          document
            .querySelectorAll("div.cell")
            .forEach(c =>
              c.classList.remove("correct", "incorrect", "incorrect-area")
            );
        };

      td.appendChild(cell);
      row.appendChild(td);
    }

    sudoku.appendChild(row);
  }
});

.incorrect-area {
    background-color: #A55 !important;
    border-color: #F00 !important;
}

.correct {
    background-color: #1A1 !important;
    border-color: #0F0 !important;
}

.incorrect {
    background-color: #A11 !important;
    border-color: #F00 !important;
}

div[data-box='1'], 
div[data-box='3'], 
div[data-box='5'], 
div[data-box='7'] {
    background-color: #444;
}

.button {
    display: inline-block;
    min-height: 30px;
    width: 120px;
    background-color: white;
    font-size: 32px;
    cursor: pointer;
}

#buttons {
    text-align: center;
}

div {
    padding: 0px;
}

body {
    background-color: #000;
}

#game {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
}

#sudoku {
    width: 500px;
    height: 500px;
    margin-left: auto;
    margin-right: auto;
    background-color: #111;
    border: dashed 1px white;
    color: white;
}

.row {
    border: 1px solid yellow;
}

.cell {
    cursor: default;
    height: 40px;
    width: 40px;
    padding: 0;
    margin: 0;
    border: solid white 1px;
    text-align: center;
    font-weight: bold;
    display: table-cell;
    vertical-align: middle;
    user-select: none;
}

.cell:hover {
    background-color: #765;
    transform: scale(1.3);
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>SudoQ</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
</head>
<body>
    <div id="game">
        <div id="buttons">
            <div id="start" class="button">SOLVE</div>
            <div id="check" class="button">CHECK</div>
        </div>
        <table id="sudoku">
        </table>
    </div>    
</body>
</html>

Answer 2

Вы захотите замедлить процесс рендеринга 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 секунды или начать с чего-то, чтобы увидеть, даст ли он результаты, которые вы ищете.