Jquery Chaining vs Callbacks

Para jQuery, ¿cuál es la diferencia en el resultado de los dos fragmentos siguientes? ¿Cualquier cosa? ¿Estoy en lo correcto al decir que la devolución de llamada y el segundo elemento de la cadena se ejecutan una vez completada la primera animación?Jquery Chaining vs Callbacks

$(selector).animate({ opacity: 1 }).animate({ opacity: 0.5 });

$(selector).animate({ opacity: 1}, function() 
{ 
    $(this).animate({ opacity: 0.5 }); 
});

En qué tipo (s) de la situación iba a querer usar uno sobre el otro? ¿Utilizaría este último solo si tuviera que hacer algo más sofisticado o cambiar a un selector diferente?

Gracias de antemano.

Fuente

2012-02-16 technoTarek

Al igual que una evaluación rápida, creo que la primera sería más eficiente ya que no tiene que convertir $ (esto) como un objeto jQuery y luego invocar animar sobre él. Probablemente solo quieras usar la segunda opción si tienes que hacer cosas más complicadas. Editar: Veo que no busca la eficiencia, creo que ambos funcionan de la misma manera, ya que en el primer caso, animate tendría que regresar antes de que se ejecute la segunda llamada. – kand

jQuery gestiona las animaciones poniéndolas en cola para que la segunda animación no se ejecute hasta que la primera haya finalizado. Esto solo se aplica a las animaciones. Vea el ejemplo en http://api.jquery.com/queue/ – Stefan

@Stefan Tiene sentido. ¿Lo que dices se aplica a todo lo que se detalla aquí? [jQuery Effects] (http://api.jquery.com/category/effects/) – technoTarek

Son efectivamente lo mismo, por lo que probablemente solo use el primero.

Las devoluciones de llamada (la segunda versión) son para ejecutar cualquier código arbitrario que no se ponga automáticamente en cola.

Esto incluye otros métodos jQuery como .css() por ejemplo, que si no están en la devolución de llamada, se ejecutarán mucho antes de que se complete la animación.

// .animate() is automatically queued 
$(selector).animate({ opacity: 1 }).animate({ opacity: 0.5 });

// .css() is not automatically queued, so you'd need a callback 
$(selector).animate({ opacity: 1 }, function() { 
    $(this).css({ opacity: 0.5 }); 
});

Sin la devolución de llamada ...

// Animation starts ----v 
$(selector).animate({ opacity: 1 }).css({ opacity: 0.5 }); 
// ...but .css() runs immediately-------------^ 
// ...because it isn't automatically added to the queue.

Fuente

2012-02-16 15:43:49

Buena explicación, solo estaba mirando la fuente jQuery y está en lo correcto señor! – Loktar

La única diferencia es el tiempo: La devolución de llamada en el segundo ejemplo no se ejecutará hasta que el primer animado completa . La animación encadenada en el primer ejemplo ocurrirá inmediatamente después de que comience la primera animación.

Fuente

2012-02-16 15:45:35 jbabey

http://jsfiddle.net/loktar/MJmgP/ no parece ser el caso:? – Loktar

@Rory Inicialmente pensé que el tiempo también era diferente, pero luego leí esto en jQuery.com: Cada elemento puede tener de una a varias colas de funciones asociadas a él por jQuery. En la mayoría de las aplicaciones, solo se utiliza una cola (llamada fx). Las colas permiten invocar una secuencia de acciones en un elemento de forma asincrónica, sin detener la ejecución del programa ... Por ejemplo: '$ ('# foo'). SlideUp().fadeIn(); ' Cuando se ejecuta esta instrucción, el elemento comienza su animación deslizante inmediatamente, pero la transición de desvanecimiento se coloca en la cola fx para llamarse solo una vez que se completa la transición deslizante. – technoTarek

@technoTarek esto es muy interesante, ¿tiene un enlace para las personas perezosas (como yo)? – jbabey

Respuesta

Cuestiones relacionadas