jQuery Academy · บทเรียน

ทำความเข้าใจออบเจ็กต์ Deferred

ทำความเข้าใจออบเจ็กต์ Deferred เป็นบทเรียน jQuery Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน jQuery Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน

การดำเนินการแบบอะซิงโครนัสและฟังก์ชันเรียกกลับ

ในการพัฒนาเว็บ งานหลายอย่างไม่ได้เกิดขึ้นทันที ลองนึกถึงการดึงข้อมูลจากเซิร์ฟเวอร์หรือการรอให้ผู้ใช้คลิก สิ่งเหล่านี้เรียกว่า การดำเนินการแบบอะซิงโครนัส

แต่เดิม เราจะใช้ ฟังก์ชันเรียกกลับ: ฟังก์ชันที่ทำงานหลังจากงานแบบอะซิงโครนัสเสร็จสิ้นเท่านั้น แต่ฟังก์ชันเรียกกลับที่ซ้อนกันอาจนำไปสู่ "นรกของฟังก์ชันเรียกกลับ" ทำให้โค้ดอ่านและดูแลรักษาได้ยาก

พบกับ jQuery Deferred

นี่คือจุดที่ วัตถุ Deferred ของ jQuery เข้ามาช่วย! วัตถุ Deferred เป็นวิธีที่ทรงพลังสำหรับจัดการการดำเนินการแบบอะซิงโครนัสให้เป็นระเบียบยิ่งขึ้น

วัตถุนี้ทำหน้าที่เสมือนพื้นที่พักสำหรับผลลัพธ์ในอนาคต คุณสามารถผูกฟังก์ชันไว้กับวัตถุ ซึ่งฟังก์ชันเหล่านั้นจะทำงานเมื่อการดำเนินการเสร็จสิ้น ไม่ว่าจะสำเร็จหรือล้มเหลว โดยไม่ขัดขวางโค้ดหลัก

สามสถานะของ Deferred

วัตถุ Deferred สามารถอยู่ในหนึ่งในสามสถานะ ซึ่งสะท้อนสถานะของงานแบบอะซิงโครนัสที่วัตถุนั้นแทนอยู่:

รอดำเนินการ: สถานะเริ่มต้น การดำเนินการยังไม่เสร็จสิ้น
แก้ไขสำเร็จ: การดำเนินการเสร็จสิ้นอย่างสำเร็จ
ถูกปฏิเสธ: การดำเนินการล้มเหลวหรือพบข้อผิดพลาด

เมื่อแก้ไขสำเร็จหรือถูกปฏิเสธแล้ว สถานะของวัตถุ Deferred จะไม่สามารถเปลี่ยนแปลงได้อีก

การสร้างวัตถุ Deferred

คุณสร้างวัตถุ Deferred ใหม่ได้โดยใช้ $.Deferred() วัตถุนี้จะเริ่มต้นในสถานะ รอดำเนินการ

วัตถุนี้มีเมธอดสำหรับเปลี่ยนสถานะ และลงทะเบียนฟังก์ชันเรียกกลับที่จะทำงานเมื่อสถานะเปลี่ยนแปลง

ลองสร้างวัตถุหนึ่งรายการ:

var myDeferred = $.Deferred();
console.log('Deferred is pending: ' + (myDeferred.state() === 'pending'));

ส่งสัญญาณความสำเร็จ: .resolve()

เมื่อการดำเนินการแบบอะซิงโครนัสเสร็จสมบูรณ์ คุณจะเรียกใช้เมธอด .resolve() กับวัตถุ Deferred

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

ดูการเปลี่ยนแปลงของสถานะ:

var myDeferred = $.Deferred();
console.log('Initial state: ' + myDeferred.state());

setTimeout(function() {
  myDeferred.resolve('Data fetched!');
  console.log('New state: ' + myDeferred.state());
}, 1000);

ส่งสัญญาณความล้มเหลว: .reject()

หากการดำเนินการแบบอะซิงโครนัสล้มเหลว คุณจะเรียกใช้เมธอด .reject()

การดำเนินการนี้จะเปลี่ยนสถานะของ Deferred จาก รอดำเนินการ เป็น ถูกปฏิเสธ อาร์กิวเมนต์ที่ส่งให้ .reject() จะถูกส่งไปยังฟังก์ชันเรียกกลับเมื่อเกิดความล้มเหลว ซึ่งมักเป็นข้อความแจ้งข้อผิดพลาด

ดูว่าการปฏิเสธทำงานอย่างไร:

var myDeferred = $.Deferred();
console.log('Initial state: ' + myDeferred.state());

setTimeout(function() {
  myDeferred.reject('Network error!');
  console.log('New state: ' + myDeferred.state());
}, 1000);

การจัดการความสำเร็จด้วย .done()

หากต้องการตอบสนองต่อการดำเนินการที่สำเร็จ (เมื่อ Deferred อยู่ในสถานะ แก้ไขสำเร็จ) ให้ผูกฟังก์ชันเรียกกลับด้วยเมธอด .done()

ฟังก์ชันนี้จะทำงานก็ต่อเมื่อมีการเรียก .resolve() และจะได้รับอาร์กิวเมนต์ที่ส่งผ่านโดย .resolve()

เรามาประมวลผลข้อมูลกัน:

var fetchData = function() {
  var dfd = $.Deferred();
  setTimeout(function() {
    var success = true; // Simulate success
    if (success) {
      dfd.resolve('User data loaded.');
    } else {
      dfd.reject('Failed to load user data.');
    }
  }, 1000);
  return dfd;
};

fetchData().done(function(message) {
  console.log('Success handler: ' + message);
});

การจัดการความล้มเหลวด้วย .fail()

เช่นเดียวกัน หากต้องการจัดการข้อผิดพลาด (เมื่อ Deferred อยู่ในสถานะ ถูกปฏิเสธ) ให้ใช้เมธอด .fail()

ฟังก์ชันเรียกกลับที่ส่งให้ .fail() จะทำงานก็ต่อเมื่อมีการเรียก .reject() และจะได้รับอาร์กิวเมนต์ของการเรียกนั้น

ลองจำลองข้อผิดพลาดกัน:

var fetchData = function() {
  var dfd = $.Deferred();
  setTimeout(function() {
    var success = false; // Simulate failure
    if (success) {
      dfd.resolve('User data loaded.');
    } else {
      dfd.reject('Failed to load user data.');
    }
  }, 1000);
  return dfd;
};

fetchData().fail(function(errorMessage) {
  console.log('Error handler: ' + errorMessage);
});

ทำงานเสมอ: .always()

บางครั้งคุณมีโค้ดที่ต้องทำงานไม่ว่าการดำเนินการแบบอะซิงโครนัสจะสำเร็จหรือล้มเหลว นี่คือจุดที่ .always() เข้ามาช่วย

ฟังก์ชันเรียกกลับที่ผูกไว้ด้วย .always() จะทำงานไม่ว่า Deferred จะอยู่ในสถานะ แก้ไขสำเร็จ หรือ ถูกปฏิเสธ

ใช้ .always() สำหรับการเก็บกวาดหรืออัปเดตส่วนติดต่อผู้ใช้ขั้นสุดท้าย:

var fetchData = function(shouldSucceed) {
  var dfd = $.Deferred();
  setTimeout(function() {
    if (shouldSucceed) {
      dfd.resolve('Data received!');
    } else {
      dfd.reject('Request failed!');
    }
  }, 1000);
  return dfd;
};

fetchData(false)
  .done(function(msg) { console.log('Success: ' + msg); })
  .fail(function(err) { console.log('Failure: ' + err); })
  .always(function() { console.log('Operation finished.'); });

ป้องกันสถานะด้วย .promise()

เมื่อคุณคืนค่าวัตถุ Deferred จากฟังก์ชัน คุณอาจไม่ต้องการให้โค้ดภายนอกเปลี่ยนสถานะของวัตถุได้ (เช่น เรียก .resolve() หรือ .reject() โดยตรง)

เมธอด .promise() จะคืนค่าเวอร์ชัน "อ่านอย่างเดียว" ของวัตถุ Deferred โดยจะแสดงเฉพาะเมธอดสำหรับผูกฟังก์ชันเรียกกลับ (เช่น .done(), .fail(), .always()) แต่ไม่แสดงเมธอดสำหรับเปลี่ยนสถานะ

var createAsyncTask = function() {
  var dfd = $.Deferred();
  setTimeout(function() {
    dfd.resolve('Task done!');
  }, 500);
  // Return only the promise, not the full Deferred object
  return dfd.promise();
};

var taskPromise = createAsyncTask();
taskPromise.done(function(msg) {
  console.log(msg);
});

// The following would throw an error or do nothing if trying to resolve/reject a promise
// taskPromise.resolve('Attempted to resolve externally'); // This is not possible on a promise object

ทดสอบความรู้ของคุณ

คุณจะใช้เมธอดใดต่อไปนี้เพื่อลงทะเบียน callback ที่ทำงาน ONLY เมื่อออบเจ็กต์ Deferred ทำงานแบบอะซิงโครนัสเสร็จสมบูรณ์สำเร็จ

ทบทวน: พื้นฐาน Deferred

ทำได้ดีมาก! ในบทเรียนนี้ คุณเข้าใจแนวคิดสำคัญของออบเจ็กต์ jQuery Deferred แล้ว:

ออบเจ็กต์เหล่านี้จัดการ การดำเนินการแบบอะซิงโครนัส จึงช่วยหลีกเลี่ยงปัญหา callback ซ้อนกันจนซับซ้อน
ออบเจ็กต์เหล่านี้อยู่ในสถานะ รอดำเนินการ แก้ไขสำเร็จ หรือ ถูกปฏิเสธ
คุณใช้ .resolve() เมื่อดำเนินการสำเร็จ และใช้ .reject() เมื่อดำเนินการล้มเหลว
คุณผูก callback ด้วย .done() (สำเร็จ) .fail() (ล้มเหลว) และ .always() (ทั้งสองกรณี)
.promise() จะส่งคืนออบเจ็กต์แบบอ่านอย่างเดียว เพื่อป้องกันการแก้ไขสถานะโดยตรง

ต่อไป เราจะเรียนรู้วิธีเชื่อมต่อและประกอบออบเจ็กต์ทรงพลังเหล่านี้เข้าด้วยกัน!

คำถามที่พบบ่อย

บทเรียน “ทำความเข้าใจออบเจ็กต์ Deferred” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ทำความเข้าใจออบเจ็กต์ Deferred” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส jQuery Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ทำความเข้าใจออบเจ็กต์ Deferred”

ทำความเข้าใจแนวคิดหลักของออบเจ็กต์ Deferred ของ jQuery วิธีที่ออบเจ็กต์เหล่านี้แทนการดำเนินการแบบอะซิงโครนัส และสถานะต่าง ๆ ได้แก่ รอดำเนินการ สำเร็จ และถูกปฏิเสธ คุณปฏิบัติ jQuery Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน jQuery Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน jQuery Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน

บทเรียน “ทำความเข้าใจออบเจ็กต์ Deferred” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน jQuery Academy นี้ได้ไหม

ได้ บทเรียน jQuery Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ jQuery Academy