时间戳

首页 > 解决方案 > 在 vanilla JS 中执行脚本期间更新 HTML 元素的内容

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

问题描述

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

标签： javascripthtmlasynchronous

解决方案

你会想要放慢你的 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 秒或其他时间，以查看它是否为您提供了您正在寻找的结果。

推荐阅读