วิธีการ 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,
ซึ่งช่วยให้ดำเนินการฟังก์ชันถัดไป ในคิวของฟังก์ชัน