queue နည်းလမ်း

queue နည်းလမ်းသည် ကျွန်ုပ်တို့အား အစိတ်အပိုင်းတစ်ခုနှင့် ချိတ်ဆက်ထားသော လုပ်ဆောင်ချက်များ၏ အလှည့်ကျစာရင်းနှင့် အလုပ်လုပ်ရန် ခွင့်ပြုပေးပါသည်။ clearQueue နည်းလမ်းကိုလည်း ကြည့်ရှုပါ။ ၎င်းသည် မစတင်ရသေးသော လုပ်ဆောင်ချက်အားလုံးကို အလှည့်ကျစာရင်းမှ ဖယ်ရှားရန် ခွင့်ပြုပေးပါသည်။

ဝါကျဖွဲ့ထုံး

ဤနည်းအတိုင်း အစိတ်အပိုင်းနှင့် ချိတ်ဆက်ထားသော လုပ်ဆောင်ရန် စောင့်ဆိုင်းနေသည့် အလှည့်ကျစာရင်းကို ကျွန်ုပ်တို့ ပြသပါသည်။ စာသားအနေဖြင့် အလှည့်ကျစာရင်း အမည်ကို မဖြစ်မနေပေးရန် မလိုအပ်သော ပါရာမီတာအဖြစ် ပေးပို့နိုင်ပါသည် (စံထားရှိသည်မှာ fx - စံထား အကျိုးသက်ရောက်မှု အလှည့်ကျစာရင်း)။

.queue([အလှည့်ကျစာရင်း အမည်]);

ကျွန်ုပ်တို့သည် အလှည့်ကျစာရင်းကို စီမံခန့်ခွဲနိုင်သည်။ အစိတ်အပိုင်းတစ်ခုစီအတွက် တစ်ကြိမ်သာ လုပ်ဆောင်ပါသည်။ ဤသို့လုပ်ဆောင်ရန် လက်ရှိအလှည့်ကျစာရင်း၏ အကြောင်းအရာကို အစားထိုးမည့် လုပ်ဆောင်ချက်များ၏ ခင်းကျင်းမှုတစ်ခုကို ဒုတိယပါရာမီတာအဖြစ် ပေးပို့နိုင်ပါသည်။

.queue([အလှည့်ကျစာရင်း အမည်], အသစ် အလှည့်ကျစာရင်း );

သို့မဟုတ် ဒုတိယပါရာမီတာအဖြစ် အလှည့်ကျစာရင်းထဲသို့ ထည့်သွင်းရန် callback-လုပ်ဆောင်ချက် အသစ်တစ်ခုကို ပေးပို့နိုင်သည်။ ဤလုပ်ဆောင်ချက်သည် ၎င်း၏အလှည့်တွင် နောက်လုပ်ဆောင်ချက်ကို အလိုအလျောက် ဖယ်ရှားရန်နှင့် အလှည့်ကျစာရင်းကို ရွေ့လျားစေရန် ခွင့်ပြုပေးသော ပါရာမီတာတစ်ခုအနေဖြင့် အခြားလုပ်ဆောင်ချက်တစ်ခုကို လက်ခံရရှိသည်။

.queue([အလှည့်ကျစာရင်း အမည်], callback-လုပ်ဆောင်ချက်(next) {
	next();
});

အစိတ်အပိုင်းတစ်ခုစီတွင် အလှည့်ကျစာရင်း တစ်ခု သို့မဟုတ် တစ်ခုထက် ပိုရှိနိုင်သည်။ အများအပြားသော အက်ပလီကေးရှင်းများတွင် တစ်ခုတည်း (fx) ကိုသာ အသုံးပြုပါသည်။ အလှည့်ကျစာရင်းများသည် ပရိုဂရမ်၏ လုပ်ဆောင်ချက်ကို မရပ်တန့်ဘဲ အစိတ်အပိုင်းတစ်ခုနှင့် လုပ်ဆောင်ချက်များစီစဉ်ခြင်းကို ကြားဖြတ်မှုမရှိ ဆောင်ရွက်ခွင့်ပြုပေးသည်။ callback-လုပ်ဆောင်ချက်ပါသော queue ကိုခေါ်ဆိုခြင်းသည် ကျွန်ုပ်တို့အား အလှည့်ကျစာရင်း၏ အဆုံးတွင် လုပ်ဆောင်ချက်အသစ်တစ်ခုကို ထည့်သွင်းခွင့်ပြုပေးသည်။ 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 နည်းလမ်း,
လုပ်ဆောင်ချက်များ အလှည့်ကျစာရင်းရှိ နောက်လုပ်ဆောင်ချက်ကို လုပ်ဆောင်ခွင့်ပြုပေးသည်