Quali sono le code in jQuery?

Ho trovato che il documento jQuery.com su queue() / dequeue() è troppo semplice da capire. Cosa sono esattamente le code in jQuery? Come dovrei usarli?

Gli usi di jQuery .queue() e .dequeue()

Le code in jQuery vengono utilizzate per le animazioni. Puoi usarli per qualsiasi scopo tu voglia. Sono una serie di funzioni memorizzate su base per elemento, usando jQuery.data() . Sono First-In-First-Out (FIFO). È ansible aggiungere una funzione alla coda chiamando .queue() e si rimuovono (chiamando) le funzioni usando .dequeue() .

Per capire le funzioni interne della coda jQuery, leggere la fonte e osservare gli esempi mi aiuta enormemente. Uno dei migliori esempi di una funzione di coda che ho visto è .delay() :

 $.fn.delay = function( time, type ) { time = jQuery.fx ? jQuery.fx.speeds[time] || time : time; type = type || "fx"; return this.queue( type, function() { var elem = this; setTimeout(function() { jQuery.dequeue( elem, type ); }, time ); }); }; 

La coda predefinita – fx

La coda predefinita in jQuery è fx . La coda predefinita ha alcune proprietà speciali che non sono condivise con altre code.

  1. Auto Start: quando si chiama $(elem).queue(function(){}); la coda fx dequeue automaticamente la funzione successiva e la eseguirà se la coda non è stata avviata.
  2. sentinella “inprogress”: ogni volta che si dequeue() una funzione dalla coda fx , si unshift() ( unshift() nella prima posizione dell’array) la stringa "inprogress" – che "inprogress" che la coda è attualmente in esecuzione.
  3. È l’impostazione predefinita! La coda fx viene utilizzata da .animate() e tutte le funzioni che la chiamano per impostazione predefinita.

NOTA: Se si sta utilizzando una coda personalizzata, è necessario manualmente .dequeue() le funzioni, esse non si .dequeue() automaticamente!

Recupero / impostazione della coda

È ansible recuperare un riferimento a una coda jQuery chiamando .queue() senza un argomento di funzione. È ansible utilizzare il metodo se si desidera vedere quanti elementi sono in coda. Puoi usare push , pop , unshift , shift per manipolare la coda in atto. È ansible sostituire l’intera coda passando una matrice alla funzione .queue() .

Esempi rapidi:

 // lets assume $elem is a jQuery object that points to some element we are animating. var queue = $elem.queue(); // remove the last function from the animation queue. var lastFunc = queue.pop(); // insert it at the beginning: queue.unshift(lastFunc); // replace queue with the first three items in the queue $elem.queue(queue.slice(0,3)); 

Esempio di coda di animazione ( fx ):

Esegui un esempio su jsFiddle

 $(function() { // lets do something with google maps: var $map = $("#map_canvas"); var myLatlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = {zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP}; var geocoder = new google.maps.Geocoder(); var map = new google.maps.Map($map[0], myOptions); var resized = function() { // simple animation callback - let maps know we resized google.maps.event.trigger(map, 'resize'); }; // wait 2 seconds $map.delay(2000); // resize the div: $map.animate({ width: 250, height: 250, marginLeft: 250, marginTop:250 }, resized); // geocode something $map.queue(function(next) { // find stackoverflow's whois address: geocoder.geocode({'address': '55 Broadway New York NY 10006'},handleResponse); function handleResponse(results, status) { if (status == google.maps.GeocoderStatus.OK) { var location = results[0].geometry.location; map.setZoom(13); map.setCenter(location); new google.maps.Marker({ map: map, position: location }); } // geocoder result returned, continue with animations: next(); } }); // after we find stack overflow, wait 3 more seconds $map.delay(3000); // and resize the map again $map.animate({ width: 500, height: 500, marginLeft:0, marginTop: 0 }, resized); }); 

Un altro esempio di coda personalizzata

Esegui un esempio su jsFiddle

 var theQueue = $({}); // jQuery on an empty object - a perfect queue holder $.each([1,2,3],function(i, num) { // lets add some really simple functions to a queue: theQueue.queue('alerts', function(next) { // show something, and if they hit "yes", run the next function. if (confirm('index:'+i+' = '+num+'\nRun the next function?')) { next(); } }); }); // create a button to run the queue: $(" 

Accodamento delle chiamate Ajax:

Ho sviluppato un plugin $.ajaxQueue() che utilizza $.Deferred , .queue() e $.ajax() per restituire una promise risolta al termine della richiesta. Un’altra versione di $.ajaxQueue che funziona ancora in 1.4 è pubblicata sulla mia risposta a Sequencing Ajax Requests

 /* * jQuery.ajaxQueue - A queue for ajax requests * * (c) 2011 Corey Frang * Dual licensed under the MIT and GPL licenses. * * Requires jQuery 1.5+ */ (function($) { // jQuery on an empty object, we are going to use this as our Queue var ajaxQueue = $({}); $.ajaxQueue = function( ajaxOpts ) { var jqXHR, dfd = $.Deferred(), promise = dfd.promise(); // queue our ajax request ajaxQueue.queue( doRequest ); // add the abort method promise.abort = function( statusText ) { // proxy abort to the jqXHR if it is active if ( jqXHR ) { return jqXHR.abort( statusText ); } // if there wasn't already a jqXHR we need to remove from queue var queue = ajaxQueue.queue(), index = $.inArray( doRequest, queue ); if ( index > -1 ) { queue.splice( index, 1 ); } // and then reject the deferred dfd.rejectWith( ajaxOpts.context || ajaxOpts, [ promise, statusText, "" ] ); return promise; }; // run the actual query function doRequest( next ) { jqXHR = $.ajax( ajaxOpts ) .done( dfd.resolve ) .fail( dfd.reject ) .then( next, next ); } return promise; }; })(jQuery); 

Ora ho aggiunto questo come articolo su learn.jquery.com , ci sono altri fantastici articoli su quel sito sulle code, vai a dare un’occhiata.

Per capire il metodo della coda, devi capire come jQuery fa l’animazione. Se si scrivono più chiamate di metodo animate una dopo l’altra, jQuery crea una coda “interna” e aggiunge ad essa le chiamate di metodo. Quindi esegue quelle chiamate animate una per una.

Considera il seguente codice.

 function nonStopAnimation() { //These multiple animate calls are queued to run one after //the other by jQuery. //This is the reason that nonStopAnimation method will return immeidately //after queuing these calls. $('#box').animate({ left: '+=500'}, 4000); $('#box').animate({ top: '+=500'}, 4000); $('#box').animate({ left: '-=500'}, 4000); //By calling the same function at the end of last animation, we can //create non stop animation. $('#box').animate({ top: '-=500'}, 4000 , nonStopAnimation); } 

Il metodo ‘queue’ / ‘dequeue’ ti dà il controllo su questa ‘coda di animazione’.

Di default la coda di animazione è chiamata ‘fx’. Ho creato qui una pagina di esempio che ha vari esempi che illustreranno come il metodo della coda potrebbe essere usato.

http://jsbin.com/zoluge/1/edit?html,output

Codice per la pagina di esempio sopra:

 $(document).ready(function() { $('#nonStopAnimation').click(nonStopAnimation); $('#stopAnimationQueue').click(function() { //By default all animation for particular 'selector' //are queued in queue named 'fx'. //By clearning that queue, you can stop the animation. $('#box').queue('fx', []); }); $('#addAnimation').click(function() { $('#box').queue(function() { $(this).animate({ height : '-=25'}, 2000); //De-queue our newly queued function so that queues //can keep running. $(this).dequeue(); }); }); $('#stopAnimation').click(function() { $('#box').stop(); }); setInterval(function() { $('#currentQueueLength').html( 'Current Animation Queue Length for #box ' + $('#box').queue('fx').length ); }, 2000); }); function nonStopAnimation() { //These multiple animate calls are queued to run one after //the other by jQuery. $('#box').animate({ left: '+=500'}, 4000); $('#box').animate({ top: '+=500'}, 4000); $('#box').animate({ left: '-=500'}, 4000); $('#box').animate({ top: '-=500'}, 4000, nonStopAnimation); } 

Ora puoi chiedere, perché dovrei preoccuparmi di questa coda? Normalmente, non lo farai. Ma se hai una sequenza di animazione complicata che vuoi controllare, i metodi di coda / dequeue sono tuoi amici.

Vedi anche questa conversazione interessante sul gruppo jQuery sulla creazione di una sequenza di animazione complicata.

http://groups.google.com/group/jquery-en/browse_thread/thread/b398ad505a9b0512/f4f3e841eab5f5a2?lnk=gst

Demo dell’animazione:

http://www.exfer.net/test/jquery/tabslide/

Fammi sapere se hai ancora domande.

Animazione di oggetti multipli in una coda

Ecco un semplice esempio di animazione di oggetti multipli in una coda.

Jquery ci consente di fare la fila su un solo object. Ma all’interno della funzione di animazione possiamo accedere ad altri oggetti. In questo esempio costruiamo la coda sull’object #q mentre animiamo gli oggetti # box1 e # box2.

Pensa alla coda come a una serie di funzioni. Quindi puoi manipolare la coda come una matrice. Puoi usare push, pop, unshift, shift per manipolare la coda. In questo esempio rimuoviamo l’ultima funzione dalla coda di animazione e la inseriamo all’inizio.

Quando abbiamo finito, iniziamo la coda di animazione con la funzione dequeue ().

Vedi a jsFiddle

html:

   

js:

 $(function(){ $('#q').queue('chain',function(next){ $("#box2").show("slow", next); }); $('#q').queue('chain',function(next){ $('#box1').animate( {left: 60}, {duration:1000, queue:false, complete: next} ) }); $('#q').queue('chain',function(next){ $("#box1").animate({top:'200'},1500, next); }); $('#q').queue('chain',function(next){ $("#box2").animate({top:'200'},1500, next); }); $('#q').queue('chain',function(next){ $("#box2").animate({left:'200'},1500, next); }); //notice that show effect comes last $('#q').queue('chain',function(next){ $("#box1").show("slow", next); }); }); $("#show").click(function () { $("p").text("Queue length is: " + $('#q').queue("chain").length); // remove the last function from the animation queue. var lastFunc = $('#q').queue("chain").pop(); // insert it at the beginning: $('#q').queue("chain").unshift(lastFunc); //start animation queue $('#q').dequeue('chain'); }); 

css:

  #box1 { margin:3px; width:40px; height:40px; position:absolute; left:10px; top:60px; background:green; display: none; } #box2 { margin:3px; width:40px; height:40px; position:absolute; left:100px; top:60px; background:red; display: none; } p { color:red; } 

Ti permette di mettere in coda le animazioni … per esempio, invece di questo

 $('#my-element').animate( { opacity: 0.2, width: '100px' }, 2000); 

Che attenua l’elemento e rende la larghezza di 100 px allo stesso tempo . L’uso della coda consente di mettere in scena le animazioni. Quindi uno finisce dopo l’altro.

 $("#show").click(function () { var n = $("div").queue("fx"); $("span").text("Queue length is: " + n.length); }); function runIt() { $("div").show("slow"); $("div").animate({left:'+=200'},2000); $("div").slideToggle(1000); $("div").slideToggle("fast"); $("div").animate({left:'-=200'},1500); $("div").hide("slow"); $("div").show(1200); $("div").slideUp("normal", runIt); } runIt(); 

Esempio da http://docs.jquery.com/Effects/queue

Questo thread mi ha aiutato molto con il mio problema, ma ho usato $ .queue in un modo diverso e ho pensato di pubblicare ciò che mi è venuto in mente qui. Quello di cui avevo bisogno era una sequenza di eventi (frame) da triggersre, ma la sequenza da build dynamicmente. Ho un numero variabile di segnaposti, ognuno dei quali dovrebbe contenere una sequenza animata di immagini. I dati sono contenuti in una matrice di matrici, quindi eseguo il loop degli array per creare ciascuna sequenza per ciascuno dei segnaposto come questo:

 /* create an empty queue */ var theQueue = $({}); /* loop through the data array */ for (var i = 0; i < ph.length; i++) { for (var l = 0; l < ph[i].length; l++) { /* create a function which swaps an image, and calls the next function in the queue */ theQueue.queue("anim", new Function("cb", "$('ph_"+i+"' img').attr('src', '/images/"+i+"/"+l+".png');cb();")); /* set the animation speed */ theQueue.delay(200,'anim'); } } /* start the animation */ theQueue.dequeue('anim'); 

Questa è una versione semplificata dello script a cui sono arrivato, ma dovrebbe mostrare il principio: quando una funzione viene aggiunta alla coda, viene aggiunta usando il costruttore Function - in questo modo la funzione può essere scritta dynamicmente usando le variabili del loop ( S). Si noti il ​​modo in cui la funzione viene passata l'argomento per la chiamata next (), e questa viene invocata alla fine. La funzione in questo caso non ha dipendenza temporale (non usa $ .fadeIn o qualcosa del genere), quindi scagliono i frame usando $ .delay.

Funzione makeRed e makeBlack usano queue e dequeue per eseguirsi a vicenda. L’effetto è che l’elemento “#wow” lampeggia continuamente.

       

wow