บทนำ
queueMicrotask เป็น API เบราว์เซอร์ใหม่ที่สามารถใช้แปลงโค้ดซิงโครนัสของคุณให้กลายเป็นอะซิงโครนัส:
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) หลังจากงานปัจจุบันเสร็จสิ้น และเมื่อไม่มีโค้ดอื่นรอให้รันก่อนที่การควบคุมบริบทการดำเนินการจะถูกคืนให้ event loop ของเบราว์เซอร์
โดยพื้นฐาน งานของ queueMicrotask จะถูกดำเนินการทันทีหลังจาก call stack ว่างเปล่า ก่อนที่จะส่งการควบคุมไปที่ event loop
ในกรณีของ setTimeout แต่ละงานจะถูกดำเนินการจาก event queue หลังจากที่การควบคุมถูกส่งให้ event loop
ดังนั้น หากเรารัน 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(); }อย่างไรก็ตาม การค้นหาองค์ประกอบทำเมื่อใครใช้กล่องค้นหา หมายความว่า event handler จะถูกเรียกหลังจากการควบคุมถูกส่งให้ event loop ดังนั้น การจัดเรียงข้อมูลจึงบล็อกการดำเนินการโค้ดซิงโครนัสสำคัญอื่นๆ
นี่คือวิธีที่เราสามารถใช้ queueMicrotask เพื่อปรับปรุงโค้ดของเรา:
var arr = []; function add(value) { arr.push(value); queueMicrotask(() => { arr.sort(); }) }อ้างอิง
- https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/queueMicrotask
