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

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);
    }
}

您应该研究JQuery。它将使用 Effects functions 或者插件。

然而,在回答问题时:

(我相信包括Firefox在内的所有主流浏览器都是这样运行的)。

注意:setInterval和setTimeout在同一个UI线程上执行代码。他们只需向窗口消息循环添加一个计时器回调,就可以在正确的时间调用和执行它。

在Javascript中,你的slowMeDown()函数是一种延迟事情的糟糕方法。原因是浏览器中的JS实现是单线程的。这意味着一次只能执行一个任务。通常,浏览器本身会被“冻结”,等待JS完成。这就是在您的情况下发生的情况-您的循环永远不会将控制权返回到浏览器,以便实际更新DOM元素。

使用这里其他一些人建议的setTimeout()或setInterval()可以解决这个问题,方法是将流控制返回到浏览器,并请求它在指定的毫秒数内调用您。

此外,如果你想做的是让文本淡出,考虑使用各种方法来设置CSS不透明度(不幸的是,给定浏览器支持的状态,你必须在样式对象上设置三个不同的值)。

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

255 在所有值上,使用 clearTimeout(colourChangeTimer)

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