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更改爲被延遲的樣式

回答

相關問題