Μέθοδος queue

Η μέθοδος queue μας επιτρέπει να εργαζόμαστε με την ουρά συναρτήσεων που είναι συνδεδεμένες σε ένα στοιχείο. Δείτε επίσης τη μέθοδο clearQueue, που μας επιτρέπει να αφαιρέσουμε από την ουρά όλες τις συναρτήσεις που δεν έχουν εκτελεστεί.

Σύνταξη

Έτσι εμφανίζουμε την ουρά των συναρτήσεων που εκτελούνται, που είναι συνδεδεμένες σε ένα στοιχείο. Μπορούμε να περάσουμε ως προαιρετική παράμετρο το όνομα της ουράς σε μορφή συμβολοσειράς (προεπιλογή fx - η τυπική ουρά εφέ):

.queue([όνομα ουράς]);

Μπορούμε να χειριζόμαστε την ουρά. Εκτελείται μία φορά για κάθε στοιχείο. Για αυτό μπορούμε να περάσουμε ως δεύτερη παράμετρο έναν πίνακα συναρτήσεων, που θα αντικαταστήσουν το περιεχόμενο της τρέχουσας ουράς:

.queue([όνομα ουράς], νέα ουρά );

Ή μπορούμε ως δεύτερη παράμετρο να περάσουμε μια νέα συνάρτηση callback για προσθήκη στην ουρά. Αυτή η συνάρτηση με τη σειρά της λαμβάνει μια άλλη συνάρτηση ως παράμετρο. Αυτό επιτρέπει την αυτόματη αφαίρεση του επόμενου στοιχείου από την ουρά και την προώθηση της ουράς:

.queue([όνομα ουράς], συνάρτηση- callback(next) {
	next();
});

Κάθε στοιχείο μπορεί να έχει μία ή περισσότερες ουρές. Σε πολλές εφαρμογές χρησιμοποιείται μόνο μία (fx). Οι ουρές επιτρέπουν την εκτέλεση μιας ακολουθίας ενεργειών σε ένα στοιχείο ασύγχρονα, χωρίς διακοπή της εκτέλεσης του προγράμματος. Η κλήση queue με συνάρτηση callback μας επιτρέπει να τοποθετήσουμε μια νέα συνάρτηση στο τέλος της ουράς. Η συνάρτηση callback εκτελείται μία φορά για κάθε στοιχείο στο σύνολο. Όταν προσθέτουμε μια συνάρτηση χρησιμοποιώντας το queue, πρέπει να βεβαιωθούμε ότι αργότερα θα κληθεί η μέθοδος dequeue, ώστε να αρχίσει να λειτουργεί η επόμενη συνάρτηση στην αλυσίδα.

Παράδειγμα

Ας προσθέσουμε μια προσαρμοσμένη συνάρτηση. Αρχικά, μετά από κλικ στο #animate, θα εμφανίσουμε ένα κόκκινο τετράγωνο, που θα κινείται προς τα δεξιά για διάρκεια 2δε, στη συνέχεια χρησιμοποιώντας το queue θα προσθέσουμε μια προσαρμοσμένη συνάρτηση, που θα ξαναβάψει το τετράγωνο σε πράσινο, προσθέτοντας την κλάση newcolor. Όπως βλέπετε, στη συνέχεια εδώ καλείται το dequeue, για να αφαιρέσει τη συνάρτηση από την ουρά. Μετά το τετράγωνο μας θα κινηθεί προς τα αριστερά για μισό δευτερόλεπτο και θα ξαναβαφτεί σε κόκκινο - με τη βοήθεια της δεύτερης προσαρμοσμένης συνάρτησης αφαιρούμε την κλάση newcolor. Στο τέλος της κίνησης κλείνουμε το τετράγωνο μας:

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

Παράδειγμα

Ας προσθέσουμε μια ουρά σε μορφή πίνακα, για να διαγράψουμε την προηγούμενη. Με πάτημα στο κουμπί #start θα βλέπουμε την κίνηση από το προηγούμενο παράδειγμα. Με πάτημα στο κουμπί #stop θα σταματάμε την κίνηση μέσω προσθήκης ενός κενού πίνακα. Με επαναλαμβανόμενο πάτημα στο #start η κίνηση θα ξεκινάει από την αρχή:

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

Δείτε επίσης

η μέθοδος animate,
που δημιουργεί κίνηση σε ιδιότητες στοιχείων
η μέθοδος clearQueue,
που επιτρέπει τη διαγραφή όλων των μη εκτελεσμένων στοιχείων από την ουρά συναρτήσεων
η μέθοδος dequeue,
που επιτρέπει την εκτέλεση της επόμενης συνάρτησης στην ουρά συναρτήσεων