J’ai trouvé que le document jQuery.com sur file d’attente/attente est trop simple à comprendre. Si quelqu'un peut aider à expliquer un peu plus en détail ? Je l’apprécie.
Réponses
Trop de publicités?
gnarf
Points
49213
Les utilisations de jQuery .queue() et .dequeue()
Les files d'attente en jQuery sont utilisés pour les animations. Vous pouvez les utiliser pour n'importe quel but que vous aimez. Ils sont une multitude de fonctions stockée sur un élément de base, à l'aide de jQuery.data(). Ils sont First-In-First-Out (FIFO). Vous pouvez ajouter une fonction à la file d'attente en appelant .queue(), et de vous retirer (par appel) les fonctions à l'aide d' .dequeue().
Pour comprendre l'interne jQuery file d'attente de fonctions, la lecture de la source et des exemples concrets m'aide énormément. L'un des meilleurs exemples d'une file d'attente de la fonction 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 valeur par défaut de la file d'attente - fx
La file d'attente par défaut de jQuery est - fx. La valeur par défaut de la file d'attente de quelques propriétés spéciales qui ne sont pas partagées avec d'autres files d'attente.
-
Démarrage automatique: Lors de l'appel d'
$(elem).queue(function(){});lefxde la file d'attente sera automatiquementdequeuele lendemain de la fonction et de l'exécuter si la file d'attente n'a pas commencé. -
'en cours' sentinelle: Chaque fois que vous
dequeue()d'une fonction à partir de l'fxde la file d'attente, il seraunshift()(poussez-le dans le premier emplacement du tableau), la chaîne"inprogress"- qui signale que la file d'attente est actuellement en cours d'exécution. -
C'est la valeur par défaut! L'
fxde la file d'attente est utilisée par.animate(), et toutes les fonctions qui l'appelle par défaut.
REMARQUE: Si vous utilisez une 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 à jQuery file d'attente en appelant .queue() sans un 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 de manipuler la file d'attente en place. Vous pouvez remplacer l'ensemble de la file d'attente par le passage d'un tableau à l' .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) de la file d'attente par exemple:
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);
});
Une autre coutume, la file d'attente exemple
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é une $.ajaxQueue() plugin qui utilise l' $.Deferred, .queue(), et $.ajax() également de passer de nouveau une promesse qui est résolu lorsque la requête est terminée. Une autre version de l' $.ajaxQueue qui fonctionne encore dans la version 1.4 est affiché sur ma réponse pour le Séquençage des Requêtes 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);
J'ai donc ajouté ceci comme un article sur learn.jquery.comil y a d'autres excellents articles sur ce site sur les files d'attente, aller les chercher.
SolutionYogi
Points
16697
Pour comprendre la file d'attente de méthode, vous devez comprendre comment jQuery animation. Si vous écrivez plusieurs animer méthode appelle l'un après l'autre, jQuery crée un "intérieur" de la file d'attente et ajoute ces appels de méthode. Puis il exécute ces animer des appels un par un.
Envisager de suivre le code.
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);
}
Le 'file'/'retirer' méthode vous donne le contrôle sur cette "animation de la file d'attente'.
Par défaut, l'animation de la file d'attente est nommé "fx". J'ai créé un exemple de page ici qui a de nombreux exemples qui illustrent la façon dont la file d'attente de la méthode pourrait être utilisée.
Code pour l'exemple ci-dessus la page:
$(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 me préoccuper de cette file d'attente? Normalement, vous ne. Mais si vous avez un complexe d'animation de la séquence dont vous souhaitez contrôler, puis file/file d'attente méthodes sont à votre ami.
Voir aussi cette intéressante conversation sur jQuery groupe sur la création d'un complexe d'animation de la séquence.
Démonstration de l'animation:
http://www.exfer.net/test/jquery/tabslide/
Laissez-moi savoir si vous avez encore des questions.
enf644
Points
426
Plusieurs objets de l'animation dans une file d'attente
Voici un exemple simple de plusieurs objets de l'animation dans une file d'attente.
Jquery permettre de nous en faire la file d'attente sur un seul objet. Mais à l'intérieur de la fonction d'animation, nous pouvons accéder à d'autres objets. Dans cet exemple, nous construisons notre file d'attente de plus de #q objet tout en animant #bloc1 et #box2 objets.
Pensez à la file d'attente comme un tableau de fonctions. De sorte que vous pouvez manipuler file d'attente comme un tableau. Vous pouvez utiliser push, pop, unshift, shift pour manipuler la file d'attente. Dans cet exemple, nous avons supprimer la dernière fonction de l'animation de la file d'attente et l'insérer au début.
Lorsque nous avons terminé, nous partons de l'animation de la file d'attente par dequeue() fonction.
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; }
alex
Points
186293
Il vous permet d’animations... par exemple, au lieu de cela en file d’attente
Qui s’efface l’élément et fait la largeur 100 px en même temps. À l’aide de la file d’attente vous permet de mettre en scène les animations. Si l'on se termine après l’autre.
Exemple de http://docs.jquery.com/Effects/queue
bjorsq
Points
71
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 était une séquence d'événements (frames) pour être déclenchée, mais la séquence se construit de façon dynamique. J'ai une variable de nombre de substituants, chacun de qui devrait contenir une séquence animée d'images. Les données sont gérées dans un tableau de tableaux, donc je boucle sur les tableaux à la construction de chaque séquence pour chacun des espaces réservés 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');
C'est une version simplifiée du script, je suis arrivé à, mais doit montrer le principe - lorsqu'une fonction est ajoutée à la file d'attente, il est ajouté à l'aide de la Fonction de constructeur de cette façon, la fonction peut être écrite de façon dynamique à l'aide de variables de la boucle(s). Notez la manière dont la fonction est passé en argument de la méthode next() de l'appel, et c'est invoqué à la fin. La fonction dans ce cas n'a pas le temps de dépendance (il ne doit pas utiliser $.fadeIn ou quelque chose comme ça), j'ai donc décaler les images à l'aide de $.retard.
