მეთოდი 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">დაწყება</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,
რომელიც საშუალებას აძლევს შეასრულოს შემდეგი ფუნქცია ფუნქციების რიგში