在 AJAX 同步调用的每个循环上刷新 UI 部分答案

【问题标题】：Refreshing UI parts on each loop of an AJAX sync call在 AJAX 同步调用的每个循环上刷新 UI 部分
【发布时间】：2022-01-16 18:29:26
【问题描述】：

好的，这可能是一个简单的问题，但到目前为止我没有通过搜索找到任何有用的信息，所以我在这里尝试一下。

在我正在从事的一些项目中，我在 asp.net 核心上使用普通的旧 javascript/jquery。

我目前正在 foreach 循环中对一些员工执行一些操作。对于我通过 ajax API 同步调用的每个员工。

我想要更新 UI，在进度条中显示正在处理的当前员工。

在调试时，该过程似乎工作正常，但在正常过程中，UI线程似乎没有更新，只有在所有工作都完成后。因此，一旦我开始处理员工，屏幕就会卡住并在工作完成后关闭。没有显示进度条。

我只设法显示进度动画和使用以下技巧的第一个员工

$('#applyYes').click(function (e) {
   e.preventDefault();

   var year = $('#yearCombo').val();

   $('#applyInfo').hide();
   $('#applyLoad').show();
   $('#applyAction').prop('innerText', 'Calculating...');

   setTimeout(function () {

      var employeeIDs = multipleEmployees_Array();
      for (var i = 1; i <= employeeIDs.length; i++) {
         employeeID = employeeIDs[i - 1];
         applyAmount(employeeID, year); //1. Updates progress bar 2. Ajax sync call
      }

   }, 0);

})

据我了解，e.preventDefault 似乎会在 UI 线程完成后移动正在处理的超时函数。

实现我想要的最佳方式是什么？

PS：如果可能，不要使用外部库。我正在使用第三方平台，因此很难添加外部库（策略、权限等）

【问题讨论】：

这就是为什么 a) 您不应该使用同步 AJAX 调用（它会阻止 UI 更新）和 b) 在循环中进行 AJAX 调用。为了解决这个问题，我强烈建议您进行一次异步 AJAX 调用来检索所有员工数据。这将使 UI 保持活跃，并减少服务器的压力。
澄清几点：e.preventDefault 停止默认点击事件的发生 - 如果是 <a> 则停止导航，如果是 <button type='submit' 则停止提交。就这样。 setTimeout(() => {}, 0) 用于在事件完成后“继续”处理。那部分不是异步的，它不在后台运行，它只是在后面运行。 Javascript是单线程的。您一次只能运行一段代码，其中包括 UI“更新”。因此，如果您的代码当前未运行 http 请求，则无法更新 UI。

标签： javascript jquery ajax asp.net-core user-interface

【解决方案1】：

正是由于这个原因，不推荐使用同步 HTTP 请求。不要使用它们。

改用异步请求。

如果您想按顺序运行它们，那么：

在i的成功函数中触发i+1或
使用基于 Promise 的 API 和 await 结果

【讨论】：