jQuery ข้อมูล - ฟังก์ชัน queue()

จัมโจวี่ คู่มือการใช้งานข้อมูล

ตัวอย่าง

แสดงความยาวของคู่ต่อหนึ่ง：

function showIt() {
  var n = div.queue("fx");
  $("span").text( n.length );      
  setTimeout(showIt, 100);
}

ลองทดลองด้วยตัวเอง

คำนิยามและวิธีใช้

queue() ฟังก์ชันแสดงหรือปฏิบัติการคู่ต่อหนึ่งที่ทำงานบนองค์ประกอบที่ที่ตรงกันข้าม

ศัพท์

.queue(queueName)
ตัวแปร คำอธิบาย
queueName เลือกตั้ง มีค่าตัวอักษร ประกอบด้วยชื่อของลำดับ โดยเริ่มต้นค่าเริ่มต้นคือ fx ตามมาตราฐานของลำดับที่มีผลกระทบ

ปฏิบัติการคู่ต่อหนึ่ง

queue() ฟังก์ชันปฏิบัติการคู่ต่อหนึ่งที่ทำงานบนฟังก์ชันที่ทำงานบนองค์ประกอบที่ที่ตรงกันข้าม

ศัพท์

.queue(queueName,newQueue)
ตัวแปร คำอธิบาย
queueName เลือกตั้ง มีค่าตัวอักษร ประกอบด้วยชื่อของลำดับ โดยเริ่มต้นค่าเริ่มต้นคือ fx ตามมาตราฐานของลำดับที่มีผลกระทบ

รายละเอียด

แต่ละองค์ประกอบสามารถมีหนึ่งถึงหลายฟังก์ชันที่เพิ่มโดย jQuery ได้ ในโปรแกรมส่วนใหญ่ ใช้เพียงคู่ต่อหนึ่ง (ชื่อว่า fx) คู่ต่อหนึ่งปฏิบัติการเรียกฟังก์ชันตามลำดับบนองค์ประกอบ โดยที่ไม่จะทำให้โปรแกรมหยุดทำงาน ตัวอย่างที่พบบ่อยคือการเรียกฟังก์ชันหลายต่อหลายขององค์ประกอบ ตัวอย่างเช่น：

$('#foo').slideUp().fadeIn();

เมื่อรายการนี้ทำงาน องค์ประกอบจะเริ่มทำการเคลื่อนไหวทันที แต่การทำงานของเปลืองลวงถูกจัดไว้ในคู่ fx และจะถูกเรียกใช้เมื่อเคลื่อนไหวเสร็จ

วิธี .queue() อนุญาตให้เราปฏิบัติการตรงต่อคู่ฟังก์ชัน

คุณสมบัตินี้คล้ายกับการให้คำสั่งกลับตัวจากวิธีการเคลื่อนไหว แต่ไม่จำเป็นต้องกำหนดคำสั่งกลับตัวเมื่อเคลื่อนไหว

$('#foo').slideUp();
$('#foo').queue(function() {
  alert('Animation complete.');
  $(this).dequeue();
});;

เหมือนกันกับ：

$('#foo').slideUp(function() {
  alert('Animation complete.');
);

โปรดระวังว่า เมื่อเพิ่มฟังก์ชันด้วย .queue() พวกเราควรให้มั่นใจว่า .dequeue() ถูกเรียกใช้เพื่อให้ฟังก์ชันที่ต่อไปในคู่สามารถทำงานได้

ตัวอย่าง 1

ปฏิบัติการคู่ในฟังก์ชันที่กำหนด

$("document.body").click(function () {
  $("div").show("slow");
  $("div").animate({left:'+=200'},2000);
  $("div").queue(function () {
    $(this).addClass("newcolor");
    $(this).dequeue();
  });;
  $("div").animate({left:'-=200'},500);
  $("div").queue(function () {
    $(this).removeClass("newcolor");
    $(this).dequeue();
  });;
  $("div").slideUp();
);

ลองทดลองด้วยตัวเอง

ตัวอย่าง 2

ตั้งค่าตัวเลขที่ใช้ลบตัวเลขในคู่

$("#start").click(function () {
  $("div").show("slow");
  $("div").animate({left:'+=200'},5000);
  $("div").queue(function () {
    $(this).addClass("newcolor");
    $(this).dequeue();
  );
  $("div").animate({left:'-=200'},1500);
  $("div").queue(function () {
    $(this).removeClass("newcolor");
    $(this).dequeue();
  );
  $("div").slideUp();
);
$("#stop").click(function () {
  $("div").queue("fx", []);
  $("div").stop();
);

ลองทดลองด้วยตัวเอง

จัมโจวี่ คู่มือการใช้งานข้อมูล