Javascript 将一些计算结果一一追加到表行中

Question

我正在开发一个简单的 electron/node.js 应用程序，它在本地获取输入信息，进行一些计算并将计算结果显示在表格中
输入:

10s of rows of features info
ID | length | depth | 

计算:每个特征计算大约需要几秒钟。
输出:

Some amount of row from input, but with a results column 
ID | length | depth | Results 

我试图将结果附加到表中以进行呈现，代码如下所示

<table id = 'results-table'>
    <th>ID</th><th>length</th><th>depth</th><th>Results</th>
</table>

function getCrackTableValues(){
  document.body.style.cursor = 'wait';
  var table = document.getElementById('input-table'); //get info from input table
  for (var r = 1, n = table.rows.length; r < n; r++) { //skip table head tart from second row
      const crackID = table.rows[r].cells[0].innerHTML; //input
      var a_m = Number(table.rows[r].cells[1].innerHTML); // input
      var c_m = Number(table.rows[r].cells[2].innerHTML); //input
      var result = foo(a_m, c_m); //foo just for example, takes seconds for calculation 
      var newRow = document.getElementById('results-table').insertRow(); //output table
      newRow.innerHTML = '<td>'+ crackID+ 
                        '</td><td>' + `${a_m.toFixed(1)}` +
                        '</td><td>' + `${c_m.toFixed(1)}` +
                        '</td><td>' + `${result.toFixed(1)}` + //append results to output table
                        '</td>';
  }
  document.body.style.cursor = 'default';
}

该代码工作正常，但有几个问题。
第一季度 :我希望一旦完成单个计算，它会在输出表上显示结果，并移动到下一个条目的计算。因此用户可以看到当前结果，而其余行的计算仍在继续。
目前，在所有计算完成之前，输出表似乎不会显示。
有什么方法可以用来制作结果表 随着每一行的计算继续进行 逐一增长/显示?
Q2 : 我试图在计算进行时禁用光标 document.body.style.cursor = 'wait'; .并在所有计算完成后重新启用光标。
但似乎这条线执行了 之后 计算，它只会禁用光标并闪回。
我当前的实现是否存在任何潜在问题？我的 node.js 是 v12.16.3，在旧的 32 位 windows 7 上。

Answer 1

这两个问题的原因是相同的:UI 将没有机会更新，直到它设法逃脱您的非常长时间运行的循环。
您需要更改 foo()成为一个异步函数。你没有显示任何细节，所以我假设它是纯粹的 CPU 计算，没有文件或网络访问点。
我想我首先将循环内容提取到另一个函数中。然后我将循环终止条件放在该新函数的顶部:

function processOneRow(r){
  const table = document.getElementById('input-table');
  if(r >= table.rows.length){ //All done
    document.body.style.cursor = 'default';
    return;
    }

  const crackID = table.rows[r].cells[0].innerHTML;
  const a_m = Number(table.rows[r].cells[1].innerHTML);
  const c_m = Number(table.rows[r].cells[2].innerHTML);

  const result = foo(a_m, c_m);

  const newRow = document.getElementById('results-table').insertRow();
  newRow.innerHTML = '<td>'+ ...;

  setTimeout(processOneRow, 0, r+1)
}

然后你可以通过在第一行调用它来开始它:

function getCrackTableValues(){
  document.body.style.cursor = 'wait';
  setTimeout(processOneRow, 0, 1)
}

使用 setTimeout()有 0 毫秒的延迟，给 UI 线程每次更新的时间，然后才会调用 processOneRow()在输入表的下一行。
旁白:将恢复光标的代码放在 processOneRow() 内有点代码味道。如果此代码在库中，我可能会使用 before()/ after()钩子(Hook)。 (然后，您还可以确保在抛出异常时调用 after() 钩子(Hook)。)
解决此问题的另一种方法是使用 worker threads并移动 foo(a_m, c_m)那里计算。那自然是异步的。除了额外的复杂性之外，它的缺点是如果 foo()使用数据，它需要保存在该工作线程中，如果在主线程中需要相同的数据，这将变得复杂。但是，否则，对于长时间运行的进程来说，它是一个更好的解决方案。