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上测试）仅在功能结束时刷新，因此颜色从黑色变为白色。有没有人知道如何在循环中重新浏览浏览器，以便我可以看到文本淡出？

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。它将使用Effects functions或插件为您完成所有这些操作。

然而，在回答这个问题时：

通常，Web浏览器仅使用单个UI更新线程，该线程也用于执行Javascript代码。因此，浏览器将完全执行您的循环，然后在页面完成后更新页面（即所有RGG = 255,255,255）。

尝试使用window.setTimeout或window.setInterval来调用增加RGB值的函数。这允许浏览器UI更新线程在每次调用之后（在间隔或超时之间）更新显示。

（我相信所有主流浏览器都以这种方式运行，包括Firefox）。

注意：setInterval和setTimeout在同一个UI线程上执行代码。它们只是向窗口消息循环添加一个定时器回调，并在正确的时间调用并执行。

因此，如果当时正在执行其他Javascript代码或UI更新，则计时器功能必须等待。因此，不能保证在指定的时间发生该功能。此外（在Windows上）最大分辨率远小于1毫秒，通常约为1/20秒或约50毫秒。

Answer 3

你的slowMeDown（）函数是一种在Javascript中延迟事物的坏方法。原因是浏览器中的JS实现是单线程的。这意味着一次只能执行一项任务。通常，浏览器本身会“冻结”等待JS完成。这就是你的情况 - 你的循环永远不会将控制权返回给浏览器，以便实际更新DOM元素。

使用其他一些人提出的setTimeout（）或setInterval（），通过将流量控制返回给浏览器并请求它在指定的毫秒数内回拨来解决此问题。

另外，如果您打算尝试使文本淡入淡出，请考虑使用各种方法设置CSS不透明度（遗憾的是，鉴于浏览器支持的状态，您必须在样式对象上设置三个不同的值）

Answer 4

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

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

请原谅我的澳大利亚拼写。

如何在Javascript循环中重新绘制HTML元素？

4 个答案: