les utilisations de jQuery "1519360920 .queue() 1519370920" et .dequeue()

Queues en jQuery sont utilisés pour les animations. Vous pouvez les utiliser à toutes les fins que vous voulez. Il s'agit d'un tableau de fonctions stocké sur une base par élément, en utilisant jQuery.data() . Il s'agit du premier entré, premier sorti (FIFO). Vous pouvez ajouter une fonction à la file d'attente en appelant .queue() , et vous supprimez (en appelant) les fonctions en utilisant .dequeue() .

pour comprendre les fonctions internes de la file d'attente jQuery, lire la source et regarder des exemples m'aide énormément. Un des meilleurs exemples d'une fonction de file d'attente que j'ai vu est .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 file d'attente par défaut - fx

la file d'attente par défaut dans jQuery est fx . La file d'attente par défaut possède des propriétés spéciales qui ne sont pas partagées avec d'autres Files d'attente.

1. Auto Start: lors de l'appel $(elem).queue(function(){}); la fx file d'attente sera automatiquement dequeue la fonction suivante et l'exécuter si la file d'attente n'a pas commencé.
2. 'en cours' sentinelle: Chaque fois que vous dequeue() une fonction de la file d'attente fx , il sera unshift() (pousser dans le premier emplacement du tableau) la chaîne de caractères "inprogress" - qui signale que la file d'attente est en cours d'exécution.
3. C'est la valeur par défaut! la fx queue est utilisée par .animate() et toutes les fonctions qui l'appellent par défaut.

NOTE: si vous utilisez une file d'attente personnalisée, vous devez manuellement .dequeue() les fonctions, ils ne seront pas de démarrage automatique!

récupération/réglage de la file d'attente

vous pouvez récupérer une référence à une file d'attente jQuery en appelant .queue() sans argument de fonction. Vous pouvez utiliser la méthode si vous voulez voir combien d'objets sont dans la file d'attente. Vous pouvez utiliser push , pop , unshift , shift pour manipuler la file d'attente en place. Vous pouvez remplacer la file d'attente entière en passant un tableau au .queue() fonction.

Exemples Rapides:

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

une animation ( fx ) exemple de file d'attente:

Exécuter l'exemple sur 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);
});

autre exemple de file d'attente personnalisée

Exécuter l'exemple sur 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');

La Mise En Attente Des Appels Ajax:

j'ai développé un $.ajaxQueue() plugin qui utilise le $.Deferred , .queue() , et $.ajax() de transmettre également une promesse qui est résolue lorsque la demande est terminée. Une autre version de $.ajaxQueue qui fonctionne toujours en 1.4 est postée sur ma réponse à 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);

---

j'ai maintenant ajouté ceci comme un article sur learn.jquery.com , il y a d'autres grands articles sur les files d'attente sur ce site, allez voir.

pour comprendre la méthode de la file d'attente, vous devez comprendre comment jQuery fait l'animation. Si vous écrivez plusieurs appels de méthode animée l'un après l'autre, jQuery crée une file d'attente "interne" et y ajoute ces appels de méthode. Puis il lance ces appels animés un par un.

considérez le code suivant.

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

la méthode'file'/' dequeue 'vous donne le contrôle de cette'file d'attente d'animation'.

par défaut l'animation la file d'attente est nommé "fx". J'ai créé ici un exemple de page qui contient divers exemples qui illustreront comment la méthode de la file d'attente pourrait être utilisée.

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

Code pour la page d'échantillon ci-dessus:

$(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);
}

maintenant vous pouvez demander, Pourquoi devrais-je m'embêter avec cette file d'attente? Normalement, vous ne. Mais si vous avez une séquence d'animation compliquée que vous voulez contrôler, alors les méthodes queue/dequeue sont vos amis.

Voir Aussi cette intéressante conversation sur jQuery group à propos de la création d'une séquence d'animation compliquée.

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

démo de l'animation:

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

dites-moi si vous avez encore des questions.

animation D'objets multiples dans une file d'attente

voici un exemple simple d'animation d'objets multiples dans une file d'attente.

Jquery nous permet de faire la queue sur un seul objet. Mais dans la fonction d'animation nous pouvons accéder à d'autres objets. Dans cet exemple, nous construisons notre file d'attente sur l'objet #q tout en animant les objets #box1 et #box2.

pense à la file d'attente comme un tableau de fonctions. Donc vous pouvez manipuler la file d'attente comme un tableau. Vous pouvez utiliser push, pop, unshift, shift pour manipuler la file d'attente. Dans cet exemple, nous supprimons la dernière fonction de la file d'attente de l'animation et l'insérons au début.

lorsque nous avons terminé, nous démarrons la file d'attente d'animation par la fonction dequeue ().

voir à 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; }  

il vous permet de faire la queue pour les animations... par exemple, à la place de ce

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

qui fane l'élément et fait la largeur 100 px en même temps . L'utilisation de la file d'attente vous permet de mettre en scène les animations. Si l'un se termine après l'autre.

$("#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();

exemple de http://docs.jquery.com/Effects/queue

Ce fil m'a beaucoup aidé avec mon problème, mais j'ai utilisé $.file d'attente dans une manière différente, et pensé que je poste ce que j'ai trouvé ici. Ce dont j'avais besoin, c'était d'une séquence d'événements (frames) à déclencher, mais de la séquence à construire dynamiquement. J'ai un nombre variable de placeholders, dont chacun devrait contenir une séquence animée d'images. Les données sont conservées dans un tableau de tableaux, donc je boucle à travers les tableaux pour construire chaque séquence pour chaque placeholders comme ceci:

/* 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');

il s'agit d'une version simplifiée du script auquel je suis arrivé, mais qui devrait montrer le principe - quand une fonction est ajoutée à la file d'attente, elle est ajoutée en utilisant le constructeur de la fonction - de cette façon la fonction peut être écrite dynamiquement en utilisant des variables de la boucle(s). Notez la façon dont la fonction passe l'argument pour le prochain appel (), et ceci est invoqué à la fin. La fonction dans ce cas n'a pas de dépendance de temps (elle n'utilise pas $.fadeIn ou quelque chose comme cela), donc je stagger les cadres en utilisant $.retard.

fonction makeRed et makeBlack utilisez queue et dequeue pour exécuter l'un l'autre. L'effet est que l'élément "# wow " clignote continuellement.

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