JavaScript運行前重繪CSS（顯示進度指示器）

我有一個JS例程（由用戶觸發），可能需要一些時間才能完成。例程正在運行時，我想在屏幕上顯示疊加進度。下面是調用程序（這被稱爲響應click事件）的代碼：JavaScript運行前重繪CSS（顯示進度指示器）

function handleClick() { 
    $('div#progressOverlay').removeClass('hidden'); 
    myBigRoutine(); 
    ... 
    $('div#progressOverlay').addClass('hidden'); 
}

類切換觸發opacity和visibility的變化（與過渡動畫）。

該類自己改變工作正常;第一個在慢例程之前執行，第二個在其他所有之後執行。

問題是#progressOverlay的外觀不會改變，直到myBigRoutine()完成後。
其結果是，在屏幕上的進度覆蓋閃爍一秒鐘，然後立刻再次隱藏（所有沒有動畫）

有沒有辦法迫使視覺更新/重繪之前發生（或者，甚至更好，與此同時）大JavaScript例程？

來源

2012-05-26 Nathan

爲什麼不使用網絡工作者？他們是爲了這樣的東西。 –

您可以將事件綁定到動畫完成。所以，當動畫完成，只有這樣你的代碼將執行，

function handleClick() { 
    $('div#progressOverlay').removeClass('hidden'); 

} 

$("div#progressOverlay").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ 
    myBigRoutine(); 
    ... 
    $('div#progressOverlay').addClass('hidden'); 
});

我希望，這是你需要什麼:)

來源

2012-05-26 06:30:13 Jashwant

真棒，正是我需要的！非常感謝。 – Nathan

您的myBigRoutine()函數應該被異步調用。

function handleClick() { 
    $('div#progressOverlay').removeClass('hidden'); 
    setTimeout(function() { 
    myBigRoutine(); 
    ... 
    $('div#progressOverlay').addClass('hidden'); 
    }, 150); 
}

150是一個幻數，意思是超時延遲以毫秒爲單位。它可以是任何小數字。

此外，請考慮使用.hide()和.show() jQuery方法，而不是hidden類。

來源

2012-05-26 05:41:58

這項技術可行，但我必須使用至少150ms的延遲。令我擔心的是重繪對於較慢的系統將花費較長的時間，所以我將不得不使用很長的延遲並放慢速度，或者使用較短的延遲，而不是每個系統都足夠長。如果有一種以編程方式將重新繪製在例程之前排隊或檢測重新繪製完成的方式，那將非常棒。 – Nathan

我不知道該怎麼做。但我懷疑慢系統上會出現這個問題。對於瀏覽器開始重新繪製頁面，10毫秒顯然太小了。但一旦開始重繪，它不會因發生超時事件而中斷。超時回調將在重新繪製完成後調用。 –

這裏的問題是CSS過渡，它會使疊加層的不透明度動畫化。如果延遲太短，它會被中斷，並在動畫到達的任何階段卡住，這意味着如果延遲太短可能會導致疊加只能看到一半。 – Nathan

JavaScript運行前重繪CSS（顯示進度指示器）

回答

相關問題