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

JavaScript更改为延迟的样式

1 个答案: