Antes de sumergirme en la pregunta. Permítanme decir que por Event Loop me refiero al http://en.wikipedia.org/wiki/Event_loop. Esto es algo que implementan los navegadores. Para obtener más información, lea esto: http://javascript.info/tutorial/further-javascript-features/events-and-timing-depth.No entiendo completamente JavaScript Threading
Esta pregunta es difícil y larga, por lo tanto, intente soportarlo. ¡Y aprecio todas las respuestas!
So. Ahora, según tengo entendido, en JavaScript hay un solo hilo principal (en la mayoría de los entornos de navegador, eso es). Por lo tanto, un código como:
for (var color = 0x000; color < 0xfff; color++) {
$('div').css('background-color', color.toString(16));
}
producirá una animación del negro al blanco, pero no se verá que debido a que la prestación se realiza después de que el código ha sido procesado (cuando el próximo garrapata sucede - el el navegador ingresa al bucle de evento).
Si quieres ver la animación, se puede hacer:
for (var color = 0x000; color < 0xfff; color++) {
setTimeout(function() {
$('div').css('background-color', color.toString(16));
}, 0);
}
el ejemplo anterior puede producir una animación visible, ya que empuja setTimeout un nuevo evento para el navegador pila Evento bucle que será procesada después de que haya no se está ejecutando nada (ingresa al bucle de eventos para ver qué hacer a continuación).
Parece que el navegador en este caso tiene eventos 0xfff (4095) insertados en la pila, donde cada uno de ellos se procesa con un proceso de renderizado entre ellos. Entonces, mi primera pregunta (n. ° 1) es ¿cuándo exactamente tiene lugar la representación? ¿Siempre tiene lugar entre el procesamiento de dos eventos en la pila de eventos de bucle?
La segunda pregunta es sobre el código en el enlace del sitio javascript.info que te di.
...
function func() {
timer = setTimeout(func, 0)
div.style.backgroundColor = '#'+i.toString(16)
if (i++ == 0xFFFFFF) stop()
}
timer = setTimeout(func, 0)
....
Mi pregunta aquí es que el navegador va a impulsar un nuevo evento "representación" al bucle de eventos pila cada vez que llegue a la línea div.style. ... = ...? Pero, ¿no impulsa primero un evento debido a la llamada a setTimeout? Por lo tanto, termina el navegador en una pila como:
setTimeout event
render event
Desde la llamada setTimeout se procesó antes de que el cambio de estilo de div? Si es así como la pila se parece, entonces yo asumiría la próxima vez que el navegador entra en el bucle de eventos que procesará devolución de llamada del setTimeout y llegar a tener:
rendering event
setTimeout event
rendering event
y continuar con el evento de renderizado que la llamada setTimeout anteriormente producido?
1 para el enlace a 'cómo funcionan los navegadores' :-) – Martijn