JavaScript更改为被延迟的样式

我遇到了一个让我发疯的小问题，我欢迎您对此问题的任何想法。在这一点上，我觉得我只是围着圈子走。JavaScript更改为被延迟的样式

我有以下代码：

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知识是危险的，但我绝不是专家。 ;）

谢谢！

来源

2011-05-20 Nicholas

你能异步调用排序功能和移动dynaLoadingDivHide方法的，端函数调用？ http://stackoverflow.com/questions/1397478/forcing-a-dom-refresh-in-internet-explorer-after-javascript-dom-manipulation – Jasoon 2011-05-20 12:39:15

div在调用dynaLoadingDivShow（）时是否包含任何内容？其他操作完成后它是否会被数据填充？如果div在第一次“show”调用时为空，这将符合您的描述，在其他操作完成后它变得可见。 – 2011-05-20 12:35:33

你需要使用超时：

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

来源

2011-05-20 12:45:33 ic3b3rg

ic3b3rd，这似乎工作;谢谢。我尝试了一些与此类似的东西，但没有成功。我需要做一些进一步的研究。这对我来说似乎彻底不直观。你能解释为什么浏览器会这样吗？ – Nicholas 2011-05-20 19:34:29

在堆栈中断之前，屏幕不会重新绘制。它可以是一个皮塔饼来处理，但它对于行为来说实际上是至关重要的...试图想像做出100个样式变化和浏览器在每个变化之后重新绘制 - 并不漂亮。 – ic3b3rg 2011-05-20 19:40:54

我明白了;所以我最初的猜测是对的。是的，这是有道理的，我只是觉得我过去看到过不同的行为。这可能只与切线相关，但是你是否知道一个很好的资源，列出了什么构成了堆栈中的中断？当我最初寻找原因时，谷歌搜索对我来说并没有太多的帮助。另外，我不认为setTimeOut的第二个属性是可选的;这是什么默认（我猜零）？非常感谢！ – Nicholas 2011-05-20 20:10:33

JavaScript更改为被延迟的样式

回答

相关问题