Meetod queue

Meetod queue võimaldab meil töötada elemendiga seotud funktsioonide järjekorraga. Vaata ka meetodit clearQueue, mis võimaldab meil eemaldada järjekorrast kõik funktsioonid, mida pole veel käivitatud.

Süntaks

Nii kuvame elemendiga seotud käivitatavate funktsioonide järjekorda. Võib edastada valikulise parameetri järjekorra nime stringina (vaikimisi fx - standardne efektide järjekord):

.queue([järjekorra nimi]);

Me saame järjekorraga manipuleerida. Teostatakse üks kord iga elemendi jaoks. Selleks saab edastada teise parameetrina funktsioonide massiivi, mis asendab praeguse järjekorra sisu:

.queue([järjekorra nimi], uus järjekord );

Või saab teise parameetrina edastada uue callback-funktsiooni lisamiseks järjekorda. See funktsioon omakorda saab teise funktsiooni parameetrina. See võimaldab automaatselt järgmise elemendi järjekorrast eemaldada ja järjekorda edasi liigutada:

.queue([järjekorra nimi], callback-funktsioon(next) {
	next();
});

Igal elemendil võib olla üks või mitu järjekorda. Paljudes rakendustes kasutatakse ainult ühte (fx). Järjekorrad võimaldavad sooritada toimingute jada elemendiga asünkroonselt, programmi täitmist katkestamata. Kutse queue callback-funktsiooniga võimaldab meil paigutada uue funktsiooni järjekorra lõppu. callback-funktsioon käivitatakse üks kord iga elemendi jaoks komplektis. Funktsiooni lisamisel queue abil, peame veenduma, et hiljem kutsutakse meetod dequeue, et järgmine funktsioon ahelas hakkaks tööle.

Näide

Lisame kohandatud funktsiooni. Kõigepealt, pärast vajutust nupule #animate, näitame punast ruutu, mis liigub paremale 2s jooksul, seejärel kasutame queue, et lisada kohandatud funktsioon, mis värvib ruudu roheliseks, lisades klassi newcolor. Nagu näete, kutsutakse siis siin dequeue, et eemaldada funktsioon järjekorrast. Seejärel liigub meie ruut vasakule poole sekundi ja värvub tagasi punaseks - kasutades teist kohandatud funktsiooni eemaldame klassi newcolor. Pärast animatsiooni lõppu ahendame meie ruudu:

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

Näide

Lisame järjekorra massiivi kujul, et eemaldada eelmine. Nupu #start vajutamisel näeme eelmise näite animatsiooni. Nupu #stop vajutamisel peatame animatsiooni, lisades tühja massiivi. Uuesti nupu #start vajutamisel algab animatsioon uuesti:

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

Vaata ka

meetod animate,
mis animerib elementide omadusi
meetod clearQueue,
mis võimaldab eemaldada kõik täitmata elemendid funktsioonide järjekorrast
meetod dequeue,
mis võimaldab käivitada järgmise funktsiooni funktsioonide järjekorras