บทนำสู่ JavaScript queueMicrotask

แนะนำตัว

คิวไมโครทาสก์ เป็น API ของเบราว์เซอร์ใหม่ที่สามารถใช้แปลงโค้ดซิงโครนัสของคุณเป็น async:

queueMicrotask(() => {
    console.log('hey i am executed asychronously by queueMicrotask');
});

คล้ายกับสิ่งที่เราทำโดยใช้ setTimeout:

setTimeout(() => {
    console.log('hey i am executed asychronously by setTimeout');
}, 0);

queueMicrotaskมีประโยชน์อย่างไร เมื่อเรามี setTimeout . แล้ว ?

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

โดยทั่วไปงานของ queueMicrotask ถูกดำเนินการหลังจาก callstack ปัจจุบันว่างเปล่าก่อนที่จะส่งการดำเนินการไปยังลูปของเหตุการณ์

ในกรณีของ setTimeout แต่ละงานจะดำเนินการจากคิวเหตุการณ์ หลังจากกำหนดการควบคุมให้กับลูปเหตุการณ์แล้ว

ดังนั้นหากเราดำเนินการ setTimeout ก่อน แล้วตามด้วย queueMicrotask อันไหนจะถูกเรียกก่อน? รันโค้ดด้านล่างและตรวจสอบตัวเอง:

setTimeout(() => {
    console.log('hey i am executed asychronously by setTimeout');
},0);

queueMicrotask(() => {
    console.log('hey i am executed asychronously by queueMicrotask');
}); 

Node.js ทำสิ่งเดียวกันกับ "process.nextTick"

เมื่อใดควรใช้ มัน

ไม่มีกฎว่าเมื่อใดควรใช้ queueMicrotask แต่สามารถใช้อย่างชาญฉลาดเพื่อเรียกใช้โค้ดโดยไม่ต้องหยุดการทำงานปัจจุบัน

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

var arr=[];

function add(value){
  arr.push(value);
  arr.sort();
}

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

นี่คือวิธีที่เราใช้ queueMicrotask เพื่อปรับปรุงโค้ดของเรา:

var arr = [];

function add(value) {
  arr.push(value);
  queueMicrotask(() => {
    arr.sort();
  })
}

ข้อมูลอ้างอิง

• https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/queueMicrotask