浏览器完成更新 DOM 时的事件监听器答案

【问题标题】：浏览器完成更新 DOM 时的事件监听器
【发布时间】：2022-01-23 13:16:16
【问题描述】：

有一个巨大的 HTML 表格和对其进行排序的 JS 代码。
我想在执行排序代码时显示一些加载图标或叠加层。
一切正常，但代码结束与更新表的实际外观之间存在时间差。
我猜浏览器完成重绘页面需要一些时间。
我曾尝试使用 Observer，但它仅在 DOM 修改后触发，在我看到实际更新的表之前仍有延迟。
浏览器绘制完页面后是否有JS事件发生？

【问题讨论】：

不能只在排序代码的末尾调用一个函数吗？
这是我尝试做的第一件事，但事实证明，当发生如此巨大的 DOM 更新时，浏览器需要一些时间才能真正显示更新的元素。因此，使用您的方法，在排序代码末尾调用该函数，2-5 秒后您可以看到更新后的表格。
在这种情况下超时调用你的函数：setTimeout(yourFunction, 0);。这将允许 UI 在调用函数之前更新。但是如果您在页面中运行的操作需要 5 秒以上的时间才能运行，那么这是一个大问题。我建议您改用重构代码，或减少渲染的数据量。
我也在考虑超时，但这不是最好的解决方案，因为时间总是根据表长度和当前 CPU 和 RAM 负载而变化。不幸的是，客户希望一次查看所有数据，问题不在于排序代码本身。
您使用 MutationObserver 究竟尝试过什么？

标签： javascript html jquery browser

【解决方案1】：

您可以使用触发器在处理开始和结束时触发事件。

如果你使用 jQuery，它看起来像这样：

function processTable(){
  $(document).trigger('startProcessing', {
    description: 'Enable Loader'
  });

... //Processing done here

  $(document).trigger('endProcessing', {
    description: 'Disable Loader'
  });
}


jQuery(document).on('startProcessing',enableLoaderFunction);
jQuery(document).on('endProcessing',disableLoaderFunction);

这也可以只在 JS 中完成，方法是确保为正在使用的浏览器使用正确的事件处理程序。以下是不使用 jQuery 进行处理的文档： https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events

【讨论】：

这与在排序过程结束时调用函数相同。不幸的是，在 endProcess 触发器之后，在更新表之前会有延迟。