queue ක්‍රමය

queue ක්‍රමය මගින් අපට අංගයට බැඳි ශ්‍රිත පෝලිම සමඟ වැඩ කළ හැකිය. clearQueue ක්‍රමය ද බලන්න, එය මගින් අපට ආරම්භ කර නැති සියලුම ශ්‍රිත පෝලිමෙන් ඉවත් කළ හැකිය.

වාක්‍ය රචනය

මෙලෙස අපි අංගයට බැඳි ක්‍රියාත්මක වන ශ්‍රිතවල පෝලිම පෙන්වමු. විකල්ප පරාමිතියක් ලෙස පෝලිමේ නම තන්තු ආකාරයෙන් ලබා දිය හැකිය (පෙරනිමියෙන් fx - සම්මත ප්‍රයෝග පෝලිම):

.queue([පෝලිමේ නම]);

අපට පෝලිම හසුරුවාගත හැකිය. සිදු කරනු ලබන්නේ එක් වතාවක් එක් එක් අංගය සඳහා වේ. මේ සඳහා දෙවන පරාමිතියක් ලෙස ශ්‍රිත අරාවක් ලබා දිය හැකිය, එය වත්මන් පෝලිමේ අන්තර්ගතය ප්‍රතිස්ථාපනය කරයි:

.queue([පෝලිමේ නම], නව පෝලිම );

නැතිනම් දෙවන පරාමිතිය ලෙස නව callback-ශ්‍රිතයක් පෝලිමට එකතු කිරීම සඳහා ලබා දිය හැකිය. මෙම ශ්‍රිතය ප්‍රතිචාර වශයෙන් ලබා ගන්නේ වෙනත් ශ්‍රිතයක් පරාමිතියක් ලෙසයි. මෙය ඉඩ දෙයි ස්වයංක්‍රීයව පෝලිමෙන් ඊළඟ අංගය ඉවත් කර පෝලිම ගමන් කරවා:

.queue([පෝලිමේ නම], callback-ශ්‍රිතය(next) {
	next();
});

එක් එක් අංගයට එක් හෝ ඊට වැඩි සංඛ්‍යාවක පෝලිම් තිබිය හැකිය. බොහෝ යෙදුම් වල භාවිතා වන්නේ එක් එකක් පමණි (fx). පෝලිම් ඉඩ දෙයි අංගයක් සමඟ අනුක්‍රමික ක්‍රියා සිදු කිරීමට අසම්පාතික ලෙස, ක්‍රමලේඛ ක්‍රියාත්මක කිරීම අඛණ්ඩ නොකර. queue ඇමතුම callback-ශ්‍රිතය සමඟ අපට නව ශ්‍රිතයක් පෝලිමේ අවසානයට තැබීමට ඉඩ දෙයි. callback-ශ්‍රිතය ක්‍රියාත්මක වන්නේ එක් වතාවකට සකස් කරන ලද එක් එක් අංගය සඳහා වේ. queue භාවිතයෙන් ශ්‍රිතයක් එකතු කිරීමේදී, අපි ඒ පසුව ක්‍රමය ඇමතෙන බවට වග බලා ගත යුතුය dequeue, ඊළඟ ශ්‍රිතය දාමයේ ක්‍රියාත්මක වීම සඳහා.

උදාහරණය

අපි අභිරුචි ශ්‍රිතයක් එකතු කරමු. පළමුව, #animate මත ක්ලික් කිරීමෙන් පසු, අපි රතු චතුරස්‍රය පෙන්වමු, එය දකුණට ගමන් කරනු ඇත 2s කාලයක්, ඉන්පසු 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 ක්‍රමය,
එය ක්‍රියාත්මක කිරීමට ඉඩ දෙයි ඊළඟ ශ්‍රිතය ශ්‍රිත පෝලිමෙන්