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);});

并将参数添加到 JSortTableWork