Méthode queue

La méthode queue nous permet de travailler avec la file d'attente des fonctions liées à un élément. Voir aussi la méthode clearQueue, qui nous permet de supprimer de la file d'attente toutes les fonctions qui n'ont pas été exécutées.

Syntaxe

Ainsi nous affichons la file d'attente des fonctions exécutables, liées à l'élément. On peut passer en paramètre optionnel le nom de la file d'attente sous forme de chaîne (par défaut fx - file d'attente standard des effets) :

.queue([nom de la file d'attente]);

Nous pouvons manipuler la file d'attente. Exécuté une fois pour chaque élément. Pour cela, on peut passer en second paramètre un tableau de fonctions, qui remplacera le contenu de la file d'attente actuelle :

.queue([nom de la file d'attente], nouvelle file d'attente );

Ou on peut passer en second paramètre une nouvelle fonction callback pour l'ajouter à la file d'attente. Cette fonction reçoit à son tour une autre fonction en tant que paramètre. Cela permet de retirer automatiquement de la file d'attente l'élément suivant et de faire avancer la file d'attente :

.queue([nom de la file d'attente], fonction callback(next) {
	next();
});

Chaque élément peut avoir une ou plusieurs files d'attente. Dans de nombreuses applications, une seule est utilisée (fx). Les files d'attente permettent de réaliser une séquence d'actions avec l'élément de manière asynchrone, sans interrompre l'exécution du programme. L'appel de queue avec une fonction callback nous permet de placer une nouvelle fonction à la fin de la file d'attente. La fonction callback est exécutée une fois pour chaque élément dans l'ensemble. Lors de l'ajout d'une fonction avec queue, nous devons nous assurer qu'ensuite la méthode dequeue sera appelée, afin que la fonction suivante dans la chaîne se déclenche.

Exemple

Ajoutons une fonction personnalisée. D'abord, après avoir cliqué sur #animate, nous afficherons un carré rouge, qui se déplacera vers la droite pendant 2s, puis à l'aide de queue nous ajouterons une fonction personnalisée, qui repeindra le carré en vert, en ajoutant la classe newcolor. Comme vous pouvez le voir, ensuite on appelle ici dequeue, pour retirer la fonction de la file d'attente. Ensuite notre carré se déplacera vers la gauche pendant une demi-seconde et se repeindra en rouge - à l'aide de la deuxième fonction personnalisée nous retirons la classe newcolor. À la fin de l'animation nous replions notre carré :

<button id="animate">start</button>
<div></div>

div {
	position: absolute;
	margin: 3px;
	width: 50px;
	height: 50px;
	left: 0px;
	top: 30px;
	background: red;
	display: none;
}

div.newcolor {
	background: green;
}

$('#animate').click(function() {
	$('div')
		.show('slow')
		.animate({left: '+=200'}, 2000)
		.queue(function() {
			$(this).addClass('newcolor').dequeue();
		})
		.animate({left: '-=200'}, 500)
		.queue(function() {
			$(this).removeClass('newcolor').dequeue();
		})
		.slideUp();
});

Exemple

Ajoutons une file d'attente sous forme de tableau, pour supprimer la précédente. En cliquant sur le bouton #start nous verrons l'animation de l'exemple précédent. En cliquant sur le bouton #stop nous arrêterons l'animation en ajoutant un tableau vide. En cliquant à nouveau sur #start l'animation redémarrera :

<button id="start">start</button>
<button id="stop">stop</button>
<div></div>

div {
	position: absolute;
	margin: 3px;
	width: 50px;
	height: 50px;
	left: 0px;
	top: 30px;
	background: red;
	display: none;
}
div.newcolor {
	background: green;
}

$('#start').click(function() {
	$('div')
		.show('slow')
		.animate({left: '+=200'}, 5000)
		.queue(function() {
			$(this).addClass('newcolor').dequeue();
		})
		.animate({left: '-=200'}, 1500)
		.queue(function() {
			$(this).removeClass('newcolor').dequeue();
		})
		.slideUp();
});
	
$('#stop').click(function() {
	$('div').queue('fx', []).stop();
});

Voir aussi

la méthode animate,
qui anime les propriétés des éléments
la méthode clearQueue,
qui permet de supprimer tous les éléments non exécutés de la file d'attente des fonctions
la méthode dequeue,
qui permet d'exécuter la fonction suivante dans la file d'attente des fonctions