JavaScript 对样式的更改被延迟

Question

我遇到了一个让我发疯的小问题，我欢迎任何关于原因的想法。此时此刻，我感觉我只是在原地打转。

我有以下代码：

function JSsortTable(phase) {
    dynaLoadingDivShow();
    createSortArray();
    dataArr = do2DArraySort(dataArr, orderList, orderDir);
    sortArrayToRs();
    dynaListTable.tableControl.refreshTableViaObjects(rsDynaList, colObjs);
    dynaLoadingDivHide();
}
function dynaLoadingDivShow() {
    document.getElementById('dynaReportGuiWorking').style.display = 'block';
    document.getElementById('dynaReportGuiWorking').style.visibility = 'visible';
}                   
function dynaLoadingDivHide() {
    document.getElementById('dynaReportGuiWorking').style.display = 'none';
    document.getElementById('dynaReportGuiWorking').style.visibility = 'hidden';
}

---

<div style="visibility:hidden; display:none; z-index:25;" class="tableControlHeader" id="dynaReportGuiWorking">
    Working...
</div>

我将 JSsortTable 称为 onclick 事件。当我按原样运行上面的代码时，我从未看到有问题的 div。 JSsortTable 函数需要大约 800-2500 毫秒才能运行，因此我尝试了 10 多次却错过了它，这是极不可能的。如果我将 div 的样式更改为开始可见，那么它将保持可见，直到 JSsortTable 完成运行然后消失；完全符合预期。所以我认为问题出在 dynaLoadingDivShow 中。

现在，我尝试删除 dynaLoadingDivHide 以查看会发生什么，并发现了完全意外的情况。当 JSsortTable 函数触发时，div 将不会出现。相反，在运行所有其他代码后，当 JSsortTable 完成时，div 就会变得可见。就好像 IE（版本 8）正在保存对 DOM 的所有更改，然后等到最后才绘制它们。显然，这不是期望的行为。

有人对此有什么想法吗？我只允许使用 IE 工作，所以我没有在其他浏览器上尝试过。我有足够的 CSS/JS 知识，很危险，但我还不是专家。 ;）

谢谢！

Answer 1

您需要使用超时：

function JSsortTable() {
  dynaLoadingDivShow();
  setTimeout(JSortTableWork);
}
function JSortTableWork()
  createSortArray();
  dataArr = do2DArraySort(dataArr, orderList, orderDir);
  sortArrayToRs();
  dynaListTable.tableControl.refreshTableViaObjects(rsDynaList, colObjs);
  dynaLoadingDivHide();
}

请注意，我删除了参数阶段，因为函数中未使用它。如果您确实需要该参数，那么您需要将超时修改为

setTimeout(function(){JSortTableWork(phase);});

并将参数添加到 JOrtTableWork