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

如何解决Javascript将一些计算结果逐一添加到表行中

我正在开发一个简单的electronic / 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';
}

该代码可以正常运行，但存在一些问题。

第一季度：我希望完成一次计算后，它将在输出表上显示结果，并移至下一项的计算。这样，当其余行的计算正在进行时，用户可以看到当前结果。

目前看来，直到完成所有计算后，输出表才会显示。

有什么方法可以使结果表随着每一行的计算不断进行/逐个显示/显示？

第二季度：在尝试进行document.body.style.cursor = 'wait';时，我试图禁用光标。并在完成所有计算后重新启用光标。

但是似乎此行在计算后执行了，它只是禁用了光标并重新闪烁。

我当前的实现是否存在任何潜在问题？我的node.js是v12.16.3，在旧的32位Windows 7上。

解决方法

这两个问题的原因是相同的：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,r+1)
}

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

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

使用setTimeout()且延迟为0ms，这会给UI线程每次更新的时间，然后才在输入表的下一行调用processOneRow()。

放在一边：将代码以恢复光标在processOneRow()内，这有点代码味道。如果此代码在库中进行，则可能会使用before() / after()钩子。 （然后，如果抛出异常，您还可以确保调用after()钩子。）

解决此问题的另一种方法是使用worker threads并在其中移动foo(a_m,c_m)计算。这样自然会变得异步。除了额外的复杂性之外，缺点还在于如果foo()使用数据，则必须将其保留在该工作线程中，如果在主线程中需要相同的数据，则它将变得复杂。但是，否则，它是长时间运行的流程的更好解决方案。