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 մեթոդը,
որը թույլ է տալիս կատարել հերթում գտնվող հաջորդ ֆունկցիան