Njia queue

Njia queue inaturuhusu kufanya kazi na foleni ya vitendo vilivyounganishwa na kipengee. Angalia pia njia clearQueue, ambayo inaturuhusu kuondoa kwenye foleni vitendo vyote ambavyo havijaanzishwa.

Syntax

Hivi ndivyo tunaonyesha foleni ya vitendo vinavyotekelezwa, vilivyounganishwa na kipengee. Inaweza kupitishwa kigeu cha hiari cha jina la foleni kwa mfumo wa mfuatano (kwa chaguomsingi fx - foleni ya kawaida ya athari):

.queue([jina la foleni]);

Tunaweza kuendesha foleni. Inatekelezwa mara moja kwa kila kipengee. Kwa hili inaweza kupitishwa kigeu cha pili cha safu ya vitendo, ambavyo vitabadilisha yaliyomo ya foleni ya sasa:

.queue([jina la foleni], foleni mpya );

Au kigeu cha pili kinaweza kupitisha kitendo kipya cha callback kuongeza kwenye foleni. Kitendo hiki kwa upande wake kinapokea kitendo kingine kama kigeu. Hii inaruhusu kuondoa kiotomatiki kipengee kinachofuata kutoka kwenye foleni na kusogeza foleni:

.queue([jina la foleni], kitendo cha callback(next) {
	next();
});

Kila kipengee kinaweza kuwa na foleni moja au zaidi. Katika programu nyingi hutumia tu moja (fx). Foleni huruhusu kutekeleza mlolongo wa vitendo na kipengee kwa njia isiyo na mfululizo, bila kukatiza utekelezaji wa programu. Uitisho queue na kitendo cha callback inaturuhusu kuweka kitendo kipya mwishoni mwa foleni. Kitendo cha callback kinatekelezwa mara moja kwa kila kipengee kwenye seti. Wakati wa kuongeza kitendo kwa kutumia queue, sisi lazima tuhakikishe, kwamba baadaye utaitwa njia dequeue, kwa ajili ya kitendo kinachofuata kwenye mnyororo kufanya kazi.

Mfano

Wacha tuongeze kitendo maalum cha mtumiaji. Kwanza, baada ya kubonyeza #animate, tutaonyesha mraba mwekundu, ambao utasogea kulia kwa muda wa 2s, kisha kwa kutumia queue tutaongeza kitendo maalum cha mtumiaji, ambacho kitabadilisha rangi ya mraba kuwa kijani, kwa kuongeza darasa newcolor. Kama unavyoona, kisha hapa huitwa dequeue, ili kuondoa kitendo kutoka kwenye foleni. Kisha mraba wetu utasogea kushoto kwa nusu sekunde na kurudi rangi yake nyekundu - kwa msaada wa kitendo cha pili cha mtumiaji tunaondoa darasa newcolor. Baada ya mwisho wa uhuishaji sisi hukunjia mraba wetu:

<button id="animate">anza</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();
});

Mfano

Wacha tuongeze foleni kwa mfumo wa safu, ili kuondoa iliyotangulia. Wakati wa kubonyeza kitufe #start tutaona uhuishaji kutoka kwa mfano uliotangulia. Wakati wa kubonyeza kitufe #stop tutaacha uhuishaji kwa njia ya kuongeza safu tupu. Wakati wa kubonyeza tena #start uhuishaji utaanza upya:

<button id="start">anza</button>
<button id="stop">simamisha</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();
});

Angalia pia

njia animate,
inayohuisha sifa za vipengee
njia clearQueue,
inayoruhusu kuondoa yote yasiyokamilika vipengee kutoka kwenye foleni ya vitendo
njia dequeue,
inayoruhusu kutekeleza kinachofuata kitendo kwenye foleni ya vitendo