¿Cómo jQuery tiene funciones asíncronas?

Question

Me sorprende que no pueda encontrar una respuesta clara a esto. Así, en jQuery, usted puede hacer esto:

$(someElements).fadeOut(1000); 
$(someElements).remove(); 

cual, comenzará una animación fadeOut, pero antes de que finalice la ejecución de la segunda duración 1, los elementos se quita del DOM. Pero, ¿cómo es esto posible? Sigo leyendo que el JavaScript tiene un solo hilo (véase también: Is JavaScript guaranteed to be single-threaded?). Yo sé que puedo hacerlo bien:

$(someElements).fadeOut(1000).promise().done(function() { 
    $(someElements).remove(); 
}); 

o incluso mejor:

$(someElements).fadeOut(1000, function() { 
    $(this).remove(); 
}); 

Lo que no entiendo es cómo se ejecuta JavaScript en un "solo hilo" pero soy capaz de utilizar estos jQuery funciones que se ejecutan de forma asincrónica y visible para ver el cambio de DOM en diferentes lugares al mismo tiempo. ¿Como funciona? Esta pregunta no es: "¿Cómo puedo solucionar esto?".

Answer 1

jQuery animaciones (y prácticamente todas las animaciones basadas en javascript) utilizan temporizadores para ejecutar sus animaciones. La llamada al .fadeOut() simplemente INICIE la animación y no se completa hasta algún tiempo después cuando se realiza una serie de operaciones del temporizador.

Todo esto sigue siendo de un solo hilo. .fadeOut() hace el primer paso de la animación, establece un temporizador para el siguiente paso y luego el resto de su javascript (incluido el .remove()) se ejecuta hasta su finalización. Cuando termina ese hilo de JavaScript y transcurre el tiempo del temporizador, el temporizador se dispara y se produce el siguiente paso de la animación. Finalmente, cuando se hayan completado todos los pasos de la animación, jQuery llama a la función de finalización para la animación. Esa es una devolución de llamada que le permite hacer algo cuando la animación está lista.

Es así como a solucionar este problema:

$(someElements).fadeOut(1000, function() { 
    $(this).remove(); 
}); 

utiliza la función de finalización animación y sólo eliminan el artículo cuando se realiza la animación.

Answer 2

Hay un controlador setInterval en jQuery que realiza transformaciones en todas las propiedades de animación registradas. Si usted está viniendo de AS3, pensar en él como un controlador enterFrame, o como un método Draw en OpenGL

Answer 3

Ca que utiliza delay() que esperar un cierto tiempo o utilizar una llamada de retorno para la animación, cambiar el fadeOut con animate . jQuery usa setTimeout para animar y hacer colas.

Answer 4

De la misma manera que los sistemas operativos hace 20 años hacían multitareas. No había hilos, solo había una lista de cosas que necesitaban atención y un controlador que prestara atención a las cosas basadas en la lista.

Un solo hilo simplemente itera a través de la lista una y otra vez en todos los servicios que necesitan reparación. La única diferencia aquí es que algunas cosas tienen un período de espera asociado. Están en la lista, pero están marcados para el servicio solo después de un cierto período. Es una implementación del planificador muy básico esencialmente. El núcleo en una computadora hace lo mismo. Su CPU solo puede ejecutar algunos programas al mismo tiempo, e incluso entonces, solo un poco. El kernel del sistema operativo tiene que decidir quién llama la atención en milisegundos por milisegundo (ver cláusulas). El "kernel" o tiempo de ejecución de Javascript hace lo mismo, pero esencialmente se ejecuta en una CPU con solo un núcleo.

Esto no habla de colas de interrupción y cosas que una CPU puede hacer frente, y no estoy seguro de que Javascript tenga ningún análogo, pero en un nivel simple, creo que es una representación justa.

Answer 5

Single Threading no tiene nada que ver con la programación asíncrona. http://social.msdn.microsoft.com/Forums/uk/csharplanguage/thread/3de8670c-49ca-400f-a1dc-ce3a3619357d

Si solo tiene un hilo en el que puede ejecutar las instrucciones, no se ejecutará/siempre/se ejecutará. Durante esos espacios vacíos, esa es la oportunidad para más trabajo. La programación asincrónica simplemente divide el trabajo en bloques con capacidad de reentrada y el hilo salta alrededor donde se necesita. (Explicación conceptual)

En este caso, su pregunta podría ser más apropiada: ¿Por qué no es esto una llamada de bloqueo? En ese caso, la respuesta es bastante clara: separar las animaciones de la interfaz de usuario de las llamadas de datos. Todo el entorno JS no debe bloquearse durante 1 segundo mientras toma pequeños cortes para animar un elemento que podría recuperar o transformar datos, hacer cola de animación para otros elementos, etc.