jQuery. Wie unterscheidet sich queue() von der Verwendung der Callback-Funktion für etwas?

Question

html:

<span>hello world!</span> 

js: (mit Rückruf)

$('span').click(function() { 
    $(this).animate({ 
    fontSize: '+=10px' 
    }, 'slow', function() { 
    // callback after fontsize increased 
    $(this).text( $(this).text() + ' rolled! '); 
    }); 
}); 

so dass jedes Mal SPAN ist klicken, Text angehängt 'gerollt' nach Schriftgröße erhöht, anstatt Zusammen geschieht.

Und es kann mit queue() als auch wie folgt erfolgen:

js: (mit Queue())

$('span').click(function() { 
    $(this).animate({ 
    fontSize: '+=10px' 
    }, 'slow'}) 
    .queue(function() { 
    $(this).text( $(this).text() + ' rolled! '); 
    }); 
}); 

Ich bin nicht sicher, was der Unterschied zwischen ihnen ist. beide machen das Gleiche.

Warum ist queue() besser/lieber als Callback (oder warum nicht)? Was ist das Besondere an queue()?

Danke.

Answer 1

können Sie mehr Ereignisse setzen (die Sie in Ihrem Code specifie sonst) in der gleichen Warteschlange, wie die Animation in gesetzt wird.

So wird der Rückruf sofort nach Ihrer Animation ist bereit ausgeführt werden, aber im Fall von Mit queue() kann es andere Ereignisse in der Warteschlange geben, die zuerst ausgeführt werden.

Der Vorteil dieses Verhaltens ist, dass gleichzeitig keine Ereignisse (Slide-Up und Slide-Down) zur gleichen Zeit ausgeführt werden, was zu seltsamen Dingen führen würde.

Beispiel:

$('div').click(function() { 
    $(this).animate({ 
    color: 'green' 
    }, 'slow'}) 
    .queue(function() { 
    $(this).text(' got colored! '); 
    }); 
}); 

$('span').click(function() { 
    $(this).animate({ 
    fontSize: '+=10px' 
    }, 'slow'}) 
    .queue(function() { 
    $(this).text( ' got bigger! '); 
    }); 
}); 

Wenn Sie zuerst die div klicken und sofort danach die Spanne, jetzt können Sie sicher sein, dass die Warteschlange des div zuerst ausgeführt wird, und dass, wenn es fertig ist, die Warteschlange der Spannweite wird ausgeführt.

Im Falle eines Rückrufs wird der erste der zuerst fertiggestellten Animation ausgeführt. Und wenn sie zur gleichen Zeit bereit wären, würden beide zur gleichen Zeit ausgeführt werden. Was dazu führen würde, dass in diesem Fall weder das "Gefleckt!" Text oder das "wurde größer!" Text.

Answer 2

Die Verwendung des Parameters callback entspricht genau der Verwendung der Methode .queue(callback).
Wenn Sie eine Animation mit callback beliefern, wird der Rückruf einfach auf die gleiche Weise in die Warteschlange gestellt wie .queue.

.queue(callback) ist nur eine weitere Möglichkeit, einen Rückruf separat von Ihrer Animation hinzuzufügen.
Es gibt durchaus gute Gründe, dies zu tun:

$(this).animate(...); 
if (shouldDoCallback) { 
    $(this).queue(...); 
}