JavaScript Academy · บทเรียน

queueMicrotask และลำดับการทำงาน

ควบคุมลำดับการทำงานอย่างแม่นยำ

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

รู้จัก queueMicrotask

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

นี่เป็นเครื่องมือที่สะอาดที่สุดสำหรับเลื่อนงานไปยังจุดตรวจไมโครทาสก์ถัดไป

การใช้งานพื้นฐาน

ส่งฟังก์ชันให้กับ queueMicrotask ฟังก์ชันนั้นจะทำงานหลังโค้ดซิงโครนัสเสร็จสิ้น

console.log('start');
queueMicrotask(() => console.log('microtask'));
console.log('end');

ลำดับความสำคัญเดียวกับพรอมิส

ฟังก์ชันเรียกกลับของ queueMicrotask และ .then ของพรอมิสใช้คิวไมโครทาสก์ร่วมกัน ทั้งสองจะทำงานตามลำดับที่จัดตารางไว้

queueMicrotask(() => console.log('qmt 1'));
Promise.resolve().then(() => console.log('promise'));
queueMicrotask(() => console.log('qmt 2'));
console.log('sync');

มาก่อน setTimeout

เช่นเดียวกับไมโครทาสก์ทั้งหมด ฟังก์ชันเรียกกลับของ queueMicrotask จะทำงานก่อนแมโครทาสก์ของ setTimeout ใด ๆ แม้จะจัดตารางรายการนั้นไว้ก่อนก็ตาม

setTimeout(() => console.log('timeout (macro)'), 0);
queueMicrotask(() => console.log('microtask (micro)'));
console.log('sync');

ลำดับภายในการประมวลผลคิว

ไมโครทาสก์ทำงานตามลำดับ FIFO รายการแรกที่เข้าคิวจะทำงานเป็นรายการแรกเมื่อมีการประมวลผลคิว

queueMicrotask(() => console.log('1'));
queueMicrotask(() => console.log('2'));
queueMicrotask(() => console.log('3'));
console.log('sync done');

การซ้อนไมโครทาสก์

ไมโครทาสก์สามารถจัดคิวไมโครทาสก์อีกรายการได้ รายการใหม่จะทำงานในการประมวลผลคิวครั้งเดียวกัน หลังรายการที่อยู่ในคิวปัจจุบัน และก่อนแมโครทาสก์ใด ๆ

queueMicrotask(() => {
  console.log('A');
  queueMicrotask(() => console.log('C (nested)'));
});
queueMicrotask(() => console.log('B'));
setTimeout(() => console.log('D (macro)'), 0);
console.log('sync');

ตัวอย่างการเรียงลำดับทั้งหมด

ลองรวมโค้ดซิงโครนัส ไมโครทาสก์ และแมโครทาสก์เข้าด้วยกัน แล้วไล่ตามกฎนี้: ซิงโครนัสก่อน จากนั้นไมโครทาสก์ตามลำดับ แล้วจึงเป็นตัวจับเวลา

console.log('1 sync');
setTimeout(() => console.log('5 macro'), 0);
queueMicrotask(() => console.log('3 micro'));
Promise.resolve().then(() => console.log('4 micro'));
console.log('2 sync');

การสลับทำงานร่วมกับอะซิงก์/อะเวต

การทำงานต่อหลังคำสั่ง await ก็เป็นไมโครทาสก์เช่นกัน จึงสลับลำดับกับ queueMicrotask ตามลำดับการจัดตาราง

async function task() {
  console.log('a');
  await null;
  console.log('d (after await)');
}
queueMicrotask(() => console.log('c (queueMicrotask)'));
task();
console.log('b');

เหตุใดจึงใช้ queueMicrotask

ใช้เมื่อจำเป็นต้องเลื่อนงานเล็ก ๆ ไปทำ หลังสแตกการเรียกปัจจุบัน แต่ ก่อนที่เบราว์เซอร์จะแสดงผลหรือก่อนที่ตัวจับเวลาใด ๆ จะทำงาน วิธีนี้หลีกเลี่ยงภาระและพฤติกรรมการ resolve ของการสร้างพรอมิสชั่วคราว

let ready = false;
queueMicrotask(() => {
  ready = true;
  console.log('ready is now', ready);
});
console.log('ready is', ready);

หลีกเลี่ยงลูปไมโครทาสก์ที่ไม่สิ้นสุด

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

let n = 0;
function step() {
  if (n++ < 3) {
    console.log('step ' + n);
    queueMicrotask(step);
  }
}
setTimeout(() => console.log('macro runs after all micros'), 0);
step();

แบบจำลองความเข้าใจที่สมบูรณ์

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

console.log('script start');
setTimeout(() => console.log('setTimeout'), 0);
queueMicrotask(() => console.log('queueMicrotask'));
Promise.resolve().then(() => console.log('promise then'));
console.log('script end');

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

ฟังก์ชันเรียกกลับของ queueMicrotask ทำงานเมื่อเทียบกับ setTimeout(fn, 0) ที่ตำแหน่งใด

ทบทวน: queueMicrotask และการเรียงลำดับ

คุณเข้าใจการจัดตารางงานอย่างละเอียดแล้ว

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

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

บทเรียน “queueMicrotask และลำดับการทำงาน” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “queueMicrotask และลำดับการทำงาน”

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

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

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

บทเรียน “queueMicrotask และลำดับการทำงาน” ใช้เวลานานแค่ไหน

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

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

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

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

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