Метод queue

Метод queue бизга элементга богланган функциялар навбати билан ишлаш имконини беради. Шунингдек, clearQueue методига ҳам қаранг, у бизга ишга туширилмаган барча функцияларни навбатдан ўчириб ташлаш имконини беради.

Синтаксис

Биз элементга богланган бажарилаётган функциялар навбатини шундай кўрсатамиз. Сатр кўринишида навбат номини ихтиёрий параметр сифатида ўтказиш мумкин (супориш бўйича fx - стандартли таъсирлар навбати):

.queue([навбат номи]);

Биз навбат билан амаллар бажаришимиз мумкин. Бир марта ҳар бир элемент учун бажарилади. Бунинг учун иккинчи параметр сифатида жорий навбат мазмунини алмаштирадиган функциялар массивини ўтказиш мумкин:

.queue([навбат номи], янги навбат );

Ёки иккинчи параметр сифатида навбатга қўшиш учун янги callback-функцияни ўтказиш мумкин. Бу функция ўз навбатида параметр сифатида бошқа функцияни олади. Бу навбатдан кейинги элементни автоматик равишда ўчириш ва навбатни силжитиш имконини беради:

.queue([навбат номи], callback-функция(next) {
	next();
});

Ҳар бир элементда бир ёки бир нечта навбат бўлиши мумкин. Кўпгина дастурларда фақат биттаси (fx) ишлатилади. Навбатлар дастур ишini тўхтатмасдан, элемент билан амаллар кетма-кетлигини асинхрон тарзда амалга ошириш имконини беради. queue чақируви callback-функция билан бизга янги функцияни навбат охирига қўйиш имконини беради. callback-функция тўпламдаги ҳар бир элемент учун бир марта бажарилади. queue ёрдамида функция қўшганда, биз кейинчалик dequeue методи чақирилганига ишонч ҳосил қилишимиз керак, занжирдаги кейинги функция ишлаши учун.

Мисол

Келгинг, фойдаланувчи функциясини қўшайлик. Аввало, #animate ни босгандан сўнг, биз 2с давомида ўнгга ҳаракатланадиган қизил квадратни кўрсатамиз, сўнгра queue ёрдамида биз квадратни яшил рангга боядиган, newcolor синфини қўшадиган фойдаланувчи функциясини қўшамиз. Кўриб турганингиздек, сўнгра навбатдан функцияни олиб ташлаш учун dequeue чақирилади. Сўнгра бизнинг квадратимиз ярим сонияга чапга ҳаракатланади ва иккинчи фойдаланувчи функцияси ёрдамида қайтадан қизил рангга боянади - биз newcolor синфини олиб ташлаймиз. Анимация тугагандан сўнг биз квадратимизни йиғамиз:

<button id="animate">бошлаш</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">бошлаш</button>
<button id="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,
функциялар навбатидаги кейинги функцияни бажариш имконини беради