如何在 Javascript 循環中重新繪制 HTML 元素？

Question

我有一些 Javascript “動畫” HTML 元素的顏色變化，如下所示：

var element = document.getElementById("someid");
while (i < 255) {
    element.style.color = 'rgb(' + i + ',' + i + ',' + i + ')';
    i++;
    slowMeDown(); // This function runs for a few ms to slow the process down
}

如您所見，這會將顏色從黑色變為白色，中間經過 255 種灰色陰影。 我想讓它明顯地“淡出”，以便用戶可以看到文本逐漸消失。

但是，瀏覽器（Chrome 和 IE - 尚未在 Firefox 上測試）僅在 function 結束時刷新，因此顏色只是從黑色變為白色。 有誰知道如何在循環期間使瀏覽器重新繪制，以便我可以看到文本褪色？

Answer 1

function changeColor()
{
    changeColorIncremental(0);
}

function changeColorIncremental(i)
{
    var element = document.getElementById("someid");

    element.style.color = 'rgb(' + i + ',' + i + ',' + i + ')';

    if (i < 255) {
        // Note the 50 millisecond wait below.  Decrease this to speed up
        // the transition, and increase it to slow it down.
        setTimeout('changeColorIncremental(' + (i + 1) + ')', 50);
    }
}

Answer 2

您應該查看 JQuery。 它將使用效果功能或插件為您完成所有這些工作。

但是在回答這個問題時：

通常 web 瀏覽器只使用一個 UI 更新線程，該線程也用於執行 Javascript 代碼。 因此，瀏覽器將完全執行您的循環，並且只有在完成后才更新頁面（即所有 RGG = 255,255,255）。

嘗試使用 window.setTimeout 或 window.setInterval 來調用增加 RGB 值的 function。 這允許瀏覽器 UI 更新線程在每次調用后（在間隔或超時之間）更新顯示。

（我相信所有主流瀏覽器都以這種方式運行，包括 Firefox）。

注意： setInterval 和 setTimeout 在同一個 UI 線程上執行代碼。 他們只需在 window 消息循環中添加一個計時器回調，它就會在正確的時間被調用和執行。

因此，如果當時正在執行其他 Javascript 代碼或 UI 更新，則計時器 function 必須等待。 所以 function 不能保證在指定的時間發生。 此外（在 Windows 上）最大分辨率遠小於 1 毫秒，通常約為 1/20 秒或約 50 毫秒。

Answer 3

您的 slowMeDown() function 是延遲 Javascript 中的事情的壞方法。 原因是瀏覽器中的 JS 實現是單線程的。 這意味着一次只能執行一項任務。 通常，瀏覽器本身會“凍結”等待 JS 完成。 這就是您的情況 - 您的循環永遠不會將控制權返回給瀏覽器以實際更新 DOM 元素。

使用此處其他一些人提出的 setTimeout() 或 setInterval() ，通過將流控制返回給瀏覽器並請求它在指定的毫秒數內回叫您來解決此問題。

此外，如果您打算讓文本褪色，請考慮使用各種方法設置 CSS 不透明度（不幸的是，鑒於瀏覽器支持 state，您必須在樣式對象上設置三個不同的值）。

Answer 4

我會使用colourChangeTimer = setInterval(function() { //colour change code }, 100);

然后在所有值達到255后，使用clearTimeout(colourChangeTimer) 。

原諒我的澳大利亞拼寫。