JavaScript Academy · บทเรียน

งานแมโครและคิวงาน

ทำความเข้าใจว่าตัวจับเวลาและ I/O ถูกจัดตารางอย่างไร

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

งานแมโครคืออะไร

งานแมโคร หรือที่เรียกว่างาน คือหน่วยของงานที่กำหนดให้ทำงานภายหลัง เมื่อโค้ดแบบทำงานตามลำดับปัจจุบันเสร็จสิ้น ฟังก์ชันเรียกกลับของ setTimeout เป็นตัวอย่างคลาสสิก

งานแมโครจะรออยู่ใน คิวงาน จนกว่าสแตกการเรียกใช้จะว่าง

setTimeout เลื่อนการทำงานออกไป

setTimeout ลงทะเบียนฟังก์ชันเรียกกลับให้ทำงานในภายหลัง แม้จะกำหนดความหน่วงเป็น 0 ฟังก์ชันนี้ก็จะทำงาน หลังจากโค้ดแบบทำงานตามลำดับปัจจุบันทั้งหมด

console.log('first');
setTimeout(() => console.log('third (timeout)'), 0);
console.log('second');

คิวงาน

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

console.log('sync start');
setTimeout(() => console.log('task 1'), 0);
setTimeout(() => console.log('task 2'), 0);
console.log('sync end');

งานทำงานตามลำดับที่เข้าคิว

งานที่มีความหน่วงเท่ากันจะทำงานตามลำดับที่กำหนดเวลาไว้ คิวงานเป็นแบบ FIFO: เข้าก่อน ออกก่อน

setTimeout(() => console.log('A'), 0);
setTimeout(() => console.log('B'), 0);
setTimeout(() => console.log('C'), 0);
console.log('sync');

ความหน่วงเป็นค่าขั้นต่ำ ไม่ใช่ค่าที่แน่นอน

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

setTimeout(() => console.log('100ms'), 100);
setTimeout(() => console.log('0ms'), 0);
console.log('synchronous runs first');

การจัดลำดับตามความหน่วง

ความหน่วงที่แตกต่างกันทำให้ลำดับเปลี่ยนไป ความหน่วงที่สั้นกว่าจะพร้อมทำงานเร็วกว่า จึงมักทำงานก่อนความหน่วงที่ยาวกว่า โดยไม่คำนึงถึงลำดับที่กำหนดเวลาไว้

setTimeout(() => console.log('50'), 50);
setTimeout(() => console.log('10'), 10);
setTimeout(() => console.log('30'), 30);
console.log('start');

หนึ่งงานต่อหนึ่งรอบของวงจร

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

console.log('1');
setTimeout(() => {
  console.log('2');
  setTimeout(() => console.log('4'), 0);
}, 0);
setTimeout(() => console.log('3'), 0);

ตัวจับเวลาที่ซ้อนกันจะเข้าคิวในภายหลัง

ตัวจับเวลาที่กำหนดไว้ภายในงานจะเข้าคิว ต่อท้ายงานที่กำลังรออยู่แล้ว ดังนั้นจึงทำงานในรอบถัดไปของวงจร

setTimeout(() => {
  console.log('outer');
  setTimeout(() => console.log('inner nested'), 0);
}, 0);
setTimeout(() => console.log('sibling'), 0);

setInterval ก็เป็นงานแมโครเช่นกัน

setInterval กำหนดงานแมโครที่ทำซ้ำเป็นระยะ ในที่นี้เราจะทำซ้ำเพียงไม่กี่รอบ แล้วหยุดด้วย clearInterval เพื่อจำกัดปริมาณผลลัพธ์

let count = 0;
const id = setInterval(() => {
  count++;
  console.log('tick ' + count);
  if (count === 3) clearInterval(id);
}, 10);
console.log('interval scheduled');

การทำงานตามลำดับชนะเสมอ

ไม่ว่าความหน่วงจะสั้นเพียงใด งานแมโครทุกงานจะรออยู่หลังโค้ดแบบทำงานตามลำดับทั้งหมดของการทำงานรอบปัจจุบัน สแตกต้องว่างก่อน

setTimeout(() => console.log('macrotask'), 0);
for (let i = 1; i <= 3; i++) console.log('sync ' + i);
console.log('done sync');

เหตุใดงานแมโครจึงสำคัญ

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

console.log('schedule');
setTimeout(() => console.log('runs after sync'), 0);
console.log('still sync');

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ฟังก์ชันเรียกกลับของ setTimeout(cb, 0) จะทำงานเมื่อใด

ทบทวน: งานแมโคร

คุณได้เรียนรู้วิธีกำหนดเวลางานที่เลื่อนออกไป ดังนี้

งานแมโคร (setTimeout, setInterval) จะรออยู่ใน คิวงาน
คิวเป็นแบบ FIFO วงจรเหตุการณ์ทำงานหนึ่งงานต่อหนึ่งรอบ
ความหน่วงเป็นค่าขั้นต่ำ และโค้ดแบบทำงานตามลำดับจะทำงานก่อนเสมอ
งานย่อยมีลำดับความสำคัญสูงกว่า ซึ่งคุณจะได้ศึกษาในลำดับถัดไป

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

บทเรียน “งานแมโครและคิวงาน” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “งานแมโครและคิวงาน”

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

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

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

บทเรียน “งานแมโครและคิวงาน” ใช้เวลานานแค่ไหน

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

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

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

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

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