Question

我试图制作一个N-Queens可视化器，并将求解器连接到html文档。我的问题是我想逐步显示所有内容，每个间隔 place 的时间间隔为1秒，而不是立即显示完整的解决方案。

换句话说，我想逐步展示每一个动作。

我的放置功能也与DOM上的表挂钩，因此当将其放置在板上时，它也会将其放置在html桌上。

function place(board, row, col, val, table) {
  const newRow = board[row].split('');
  newRow[col] = val;
  board[row] = newRow.join('');
  //place on DOM as well
  table.childNodes[row].childNodes[col].innerHTML = val;
}

我为求解器提供的代码是

function solver(board, row, col, solutions) {
  if (col === board.length) {
    solutions.push([...board]);
    return;
  }

  const currentTable = listOfTables[solutions.length];

  for (let i = 0; i < board.length; i++) {
    if (canPlace(board, i, col)) {
      place(board, i, col, 'Q', currentTable);
      solver(board, row, col + 1, solutions);
      place(board, i, col, '.', currentTable);
    }
  }
}

我试图将setTimeout包装到求解器函数中，但是当超时到时，仍然可以立即运行所有代码。

currentTable变量用于了解当前将使用DOM中的哪些表。

这是包含所有代码的CodePen，如果有人需要https://codepen.io/vvus/pen/KKVKMrq?editors=1111

Answer 1

您可以根据自己的喜好调整代码

您将SyntaxError: Unexpected token ':'. Parse error.添加到所有表中，然后使用此代码在一定时间间隔内停用该属性

display="none"

所以您的最终代码可能像这样

var i=0

setInterval(() => {
          for(z=i;z<listOfTables.length;z++)  {      
    const x=document.getElementsByClassName('new-table')[z]
          if (x.style.display === "none") {
              x.style.display = "";
                       i++                                
          }    
               break  
                       }
            }, 3000);

尝试逐步打印出递归函数，而不用Java语言一次全部打印出来

1 个答案: