How to create a redraw of an HTML element in a Javascript loop?

Question

I have Javascript that "animates" a color change in an HTML element as follows:

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 } 

As you can see, this changes color from black to white, passing through 255 shades of gray between them. I would like it to noticeably “disappear” so that the user can see that the text is gradually disappearing.

However, the browser (Chrome and IE - not tested in Firefox yet) is updated only at the end of the function, so the color just changes from black to white. Does anyone know how to redraw the browser during a loop so that I can see the text disappear?

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

You should look into jQuery. He will do all this for you using the effects functions or plugins.

However, in response to a question:

Typically, web browsers use only one stream of updates for the user interface, which is also used to execute Javascript code. Therefore, the browser will fully execute your cycle and only then refresh the page after its completion (i.e. all RGG = 255,255,255).

Try using window.setTimeout or window.setInterval to call a function that increments RGB values. This allows you to update the browser browser stream to update the display after each call (between interval or timeout).

(I believe all major browsers work this way, including Firefox).

Note: setInterval and setTimeout execute code on the same user interface thread. They simply add a timer callback to the window message loop, and it calls and executes at the right time.

Therefore, if other Javascript code or user interface updates were being executed at that time, the timer function should wait. Therefore, the function is not guaranteed at the exact time indicated. Also (on Windows) the maximum resolution is much less than 1 millisecond, often about 1/20 second or about 50 milliseconds.

Answer 3

The slowMeDown () function is a bad way to delay events in Javascript. The reason is that JS implementations in browsers are single-threaded. This means that only one task is performed at a time. Often the browser itself becomes "frozen", waiting for the completion of JS. This is what happens in your case - your loop never returns control to the browser to actually update the DOM element.

Using setTimeout () or setInterval (), as suggested by some of the others here, works around this, returning flow control to the browser and requesting it to call you back in the specified number of milliseconds.

Also, if you want the text to fade, consider different ways to set CSS opacity (unfortunately, given the state of browser support, you will need to set three different values ​​for the style object).

Answer 4

I would use colourChangeTimer = setInterval(function() { //colour change code }, 100);

Then, after reaching 255 for all values, use clearTimeout(colourChangeTimer) .

Sorry my Australian spelling.