Ho trovato 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 sono utilizzate per le animazioni. Puoi usarli per qualsiasi scopo ti piaccia. Sono una matrice di funzioni memorizzate su una base per elemento, usando jQuery.data(). Sono First-In-First-Out (FIFO). È possibile aggiungere una funzione alla coda chiamando .queue()e rimuovere (chiamando) le funzioni utilizzando .dequeue().

Per capire le funzioni interne della coda jQuery, leggere la fonte e guardare esempi mi aiuta moltissimo. 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. Avvio automatico: quando si chiama automaticamente $(elem).queue(function(){});la fxcodadequeue eseguita la funzione successiva ed eseguita se la coda non è stata avviata.
2. sentinel 'inprogress': ogni volta che si eseguedequeue() una funzione dalla fxcoda, unshift()la stringa (spingerà nella prima posizione dell'array) "inprogress"- che indica che la coda è attualmente in esecuzione.
3. È l'impostazione predefinita! La fxcoda viene utilizzata da .animate()tutte le funzioni che la chiamano per impostazione predefinita.

NOTA: se si utilizza una coda personalizzata, è necessario manualmente .dequeue()le funzioni, che non si avviano automaticamente!

Recupero / impostazione della coda

È possibile recuperare un riferimento a una coda jQuery chiamando .queue()senza un argomento di funzione. È possibile utilizzare il metodo se si desidera vedere quanti elementi sono in coda. È possibile utilizzare push, pop, unshift, shiftper manipolare la coda al suo posto. È possibile sostituire l'intera coda passando un array a.queue() funzione.

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)); 

Un fxesempio di coda di animazione ( ):

Esegui l'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 l'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:
$("<button>", {
  text: 'Run Queue', 
  click: function() { 
    theQueue.dequeue('alerts'); 
  }
}).appendTo('body');

// create a button to show the length:
$("<button>", {
  text: 'Show Length', 
  click: function() { 
    alert(theQueue.queue('alerts').length); 
  }
}).appendTo('body');

Accodamento chiamate Ajax:

Ho sviluppato un $.ajaxQueue()plug-in che utilizza il $.Deferred, .queue()e $.ajax()per restituire anche una promessa che viene risolta al completamento della richiesta. Un'altra versione $.ajaxQueueche funziona ancora in 1.4 è pubblicata sulla mia risposta alle richieste di sequenziamento Ajax

/*
* 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 l'ho aggiunto come articolo su learn.jquery.com , ci sono altri fantastici articoli su quel sito sulle code, guarda.

Per comprendere il metodo della coda, devi capire come jQuery esegue l'animazione. Se si scrivono più chiamate di metodi animati uno dopo l'altro, jQuery crea una coda "interna" e aggiunge queste chiamate di metodo. Quindi esegue le chiamate animate una per una.

Prendi in considerazione 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 'coda' / 'dequeue' ti dà il controllo su questa 'coda di animazione'.

Per impostazione predefinita, la coda di animazione è denominata "fx". Ho creato una pagina di esempio che contiene vari esempi che illustreranno come utilizzare il metodo della coda.

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 potresti chiedere, perché dovrei preoccuparmi di questa coda? Normalmente no. Ma se hai una sequenza di animazione complicata che vuoi controllare, i metodi di accodamento / dequeue sono i tuoi amici.

Vedi anche questa interessante conversazione sul gruppo jQuery sulla creazione di una sequenza animata 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 più oggetti in una coda

Ecco un semplice esempio di animazione di più oggetti in una coda.

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

Pensa alla coda come a una serie di funzioni. Quindi puoi manipolare la coda come un array. È possibile utilizzare push, pop, unshift, shift per manipolare la coda. In questo esempio rimuoviamo l'ultima funzione dalla coda di animazione e la inseriamo all'inizio.

Al termine, iniziamo la coda di animazione con la funzione dequeue ().

Vedi su jsFiddle

html:

  <button id="show">Start Animation Queue</button>
  <p></p>
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="q"></div>

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 consente di mettere in coda le animazioni ... ad esempio, invece di questo

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

Ciò svanisce l'elemento e rende la larghezza di 100 px contemporaneamente . 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

Questa discussione mi ha aiutato molto con il mio problema, ma ho usato $ .queue in un modo diverso e ho pensato di pubblicare quello che ho trovato qui. Ciò di cui avevo bisogno era una sequenza di eventi (frame) da attivare, ma la sequenza da costruire in modo dinamico. Ho un numero variabile di segnaposto, ognuno dei quali dovrebbe contenere una sequenza animata di immagini. I dati sono conservati in una matrice di matrici, quindi cerco le matrici per creare ciascuna sequenza per ciascuno dei segnaposto in questo modo:

/* 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 Funzione - in questo modo la funzione può essere scritta in modo dinamico usando le variabili dal ciclo ( S). Nota il modo in cui la funzione viene passata l'argomento per la chiamata successiva () e questo viene invocato alla fine. La funzione in questo caso non ha dipendenza dal tempo (non usa $ .fadeIn o qualcosa del genere), quindi sfalso i frame usando $ .delay.

Funzione makeRede makeBlackutilizzo queuee dequeueper eseguirsi a vicenda. L'effetto è che l'elemento '#wow' lampeggia continuamente.

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
          $('#wow').click(function(){
            $(this).delay(200).queue(makeRed);
            });
          });

      function makeRed(){
        $('#wow').css('color', 'red');
        $('#wow').delay(200).queue(makeBlack);
        $('#wow').dequeue();
      }

      function makeBlack(){
        $('#wow').css('color', 'black');
        $('#wow').delay(200).queue(makeRed);
        $('#wow').dequeue();
      }
    </script>
  </head>
  <body>
    <div id="wow"><p>wow</p></div>
  </body>
</html>