javascript - funciones - promesas typescript

¿Cómo jQuery tiene funciones asíncronas?

Question

Me sorprende que no pueda encontrar una respuesta clara a esto. Entonces, en jQuery, puedes hacer esto:

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

Lo cual, iniciará una animación fadeOut, pero antes de que termine de ejecutarse en la duración de 1 segundo, los elementos se eliminan del DOM. Pero, ¿cómo es esto posible? Sigo leyendo que el JavaScript tiene un solo hilo (ver también: ¿Se garantiza que JavaScript sea de un solo hilo? ). Sé que puedo hacer cualquiera de los dos:

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

o mejor:

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

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

Answer 1

De la misma manera en 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 único hilo simplemente itera a través de la lista una y otra vez en todos los servicios que requieren 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 cosas como colas de interrupción y cosas que una CPU puede manejar, 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 2

Hay un controlador setInterval en jQuery que realiza transformaciones en todas las propiedades de animación registradas. Si vienes de as3, piensa en él como un controlador EnterFrame, o como un método Draw en OpenGL

Answer 3

Las animaciones de jQuery (y prácticamente todas las animaciones basadas en JavaScript) usan temporizadores para ejecutar sus animaciones. La llamada a .fadeOut() simplemente INICIE la animación y no se completa hasta algún tiempo después, cuando se realizan una serie de operaciones de temporizador.

Todo esto sigue siendo de un solo hilo. .fadeOut() hace el primer paso de la animación, establece un temporizador para el próximo 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.

Así es como arreglas este problema:

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

Utiliza la función de finalización de animación y solo elimina el elemento cuando finaliza la animación.

Answer 4

Puede usar delay() para esperar un tiempo determinado o usar una devolución de llamada para la animación, cambiando el fadeOut con animate . jQuery usa setTimeout para animar y hacer colas.

Answer 5

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

Si solo tiene un hilo en el que puede ejecutar 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ñas porciones para animar un elemento que podría estar recuperando o transformando datos, haciendo cola de animación para otros elementos, etc.