Before diving into the question. Let me say that in Event Loop, I mean http://en.wikipedia.org/wiki/Event_loop . This is what browsers implement. For more information, read the following: http://javascript.info/tutorial/further-javascript-features/events-and-timing-depth .
This question is complex and lengthy, so please try to carry it! And I appreciate all the answers!
So. Now, as I understand it, there is one main thread in JavaScript (in most browsers, that is). So a code like:
for (var color = 0x000; color < 0xfff; color++) {
$('div').css('background-color', color.toString(16));
}
It will create an animation from black to white, but you won’t see it, because the rendering is performed after the code has been processed (when the next tick occurs, the browser enters the event loop).
If you want to see the animation, you can do:
for (var color = 0x000; color < 0xfff; color++) {
setTimeout(function() {
$('div').css('background-color', color.toString(16));
}, 0);
}
In the above example, a visible animation will be created, since setTimeout pops a new event in the Event Loop stack of the browser, which will be processed after nothing is done (it enters the event loop to see what to do next).
It seems that the browser in this case has 0xfff (4095) events pushed onto the stack, where each of them is processed by the rendering process between them. So my first question (No. 1) is when exactly does the rendering happen? Does this always happen between the processing of two events in the event loop stack?
javascript.info, .
...
function func() {
timer = setTimeout(func, 0)
div.style.backgroundColor = '#'+i.toString(16)
if (i++ == 0xFFFFFF) stop()
}
timer = setTimeout(func, 0)
....
, "" , div.style. ... = ...? - setTimeout? , , :
setTimeout event
render event
setTimeout div? , , , Event Loop, setTimeout :
rendering event
setTimeout event
rendering event
, setTimeout?