Metod queue

Metod queue bize elemente birikdirilen funksiýalar gatnagy bilen işlemäge mümkinçilik berýär. clearQueue metodyna-da serediň, bu metod bize işledilmedik funksiýalary gatnakdan aýyrmaga mümkinçilik berýär.

Sintaksis

Elemente birikdirilen ýerine ýetirilýän funksiýalar gatnagyny şeýle görkezýäris. Setir görnüşinde gatnagyň atany islege görä öňünden berse bolýar (deslapky ýagdaýda fx - standart effektler gatnagy):

.queue([gatnagyň ady]);

Biz gatnak bilen dolandyryp bilýäris. Her element üçin bir gezek ýerine ýetirilýär. Munuň üçin häzirki gatnagyň mazmunyny çalşyrýan funksiýalaryň massiwini ikinji argument hökmünde geçirip bileris:

.queue([gatnagyň ady], täze gatnak );

Ýa-da ikinji argument hökmünde gatnaga goşulmak üçin täze callback-funksiýany geçirip bileris. Bu funksiýa öz gezeginde başga bir funksiýany argument hökmünde aýlyp alýar. Bu indiki elementleri gatnakdan awtoamatiki aýyrmaga we gatnagy hereketlendirmäge mümkinçilik berýär:

.queue([gatnagyň ady], callback-funksiýa(next) {
	next();
});

Her elementde bir ýa-da birnäçe gatnak bolup biler. Köplenç programmalarda diňe biri ulanylýar (fx). Gatnaklar programmanyň işini bözmedik element bilen amallaryň yzygiderliligini üpjün etmäge mümkinçilik berýär. queue-i callback-funksiýa bilen çagyrmak bize täze funksiýany gatnagyň soňuna goýmaga mümkinçilik berýär. Callback-funksiýa setirdäki her element üçin bir gezek ýerine ýetirilýär. queue arkaly funksiýa goşulanda, indiki funksiýanyň zynjyrda işjeňleşmek üçin dequeue metodynyň soňra çagyrylandygyna göz ýetirmelidiris.

Mysal

Geliň, ulanyjy funksiýasyny goşalyň. Ilki bilen, #animate-e basanyňyzdan soň, biz 2s dowamynda sag tarapa hereket edjek gyzyl inädrugary görkezeris, soňra queue kömegi bilen inädrugary ýaşyl reňke öwürýän, newcolor klasyny goşýan ulanyjy funksiýasyny goşarys. Görşüňiz ýaly, soňra bu ýerde funksiýany gatnakdan aýyrmak üçin dequeue çagyrylýar. Soňra biziň inädrugarymyz ýarym sekunt dowamynda çep tarapa hereket eder we ikinci ulanyjy funksiýamyzyň kömegi bilen gyzyl reňke gaýdyp gelýär, biz newcolor klasyny aýyraýs. Animasiýa gutaranymyzda biziň inädrugarymyzy ýygýarys:

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

Mysal

Geliň, öňküsini aýyrmak üçin massiw görnüşinde gatnak goşalyň. #start düwmesine basanymyzda biz öňki mysaldaky animasiýany göreris. #stop düwmesine basanymyzda biz boş massiw goşmak arkaly animasiýany duruzarys. #start-a ýene basanymyzda animasiýa täzeden başlar:

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

Şeýle-de serediň

animate metodu,
elementleriň häsiýetlerini animasiýalaýar
clearQueue metodu,
funksiýalar gatnagyndan ýerine ýetirilmedik elementleriň hemmesini aýyrmaga mümkinçilik berýär
dequeue metodu,
funksiýalar gatnagyndaky indiki funksiýany ýerine ýetirmäge mümkinçilik berýär