לולאת האירועים

חלק מהיחידה יסודות Node.js במסלול ה-Node.js של Coddy. שיעור 26 מתוך 33.

קריאות חוזרות (callbacks) והבטחות רצות מאוחר יותר, ובאגים מסתתרים כשלא יודעים בדיוק מתי.

Node מריצה תחילה את כל הקוד הסינכרוני עד סופו. לאחר מכן היא מריצה מיקרו־משימות: קריאות חוזרות של הבטחות ופונקציות שהועברו אל queueMicrotask. רק אז מגיע תור הטיימרים. setTimeout(fn, ms) מריצה את fn פעם אחת, אחרי ms אלפיות השנייה. אפילו setTimeout(fn, 0) ממתינה עד שהמיקרו־משימות מסתיימות.

setTimeout(() => console.log('C timer'), 0);
Promise.resolve().then(() => console.log('B promise'));
console.log('A sync');
// A sync, B promise, C timer

השהיה של 0 פירושה בהקדם האפשרי לאחר המיקרו־משימות, ולעולם לא לפניהן. הטיימרים מופעלים לפי סדר ההשהיה שלהם; כשההשהיות שוות, הטיימר שהוגדר ראשון מופעל ראשון.

אתגר

קל

Node מריצה את הקוד שלך בסדר קבוע. תחילה השורות הרגילות, אחר כך משימות מיקרו כגון קריאות חוזרות של הבטחות, ואז טיימרים. השתמש בסדר הזה כדי לגרום לארבע שורות להופיע בסדר המספרים בלי להזיז אותן.

order.js מדפיס את ארבע השורות שלו בסדר יורד, מ־4 עד 1. אל תזיז ואל תשנה את סדר השורות. במקום זאת, עטוף שלוש מהן כך שירוצו מאוחר יותר.

השאר את console.log('1 sync') כפי שהוא. קוד רגיל רץ ראשון.
עטוף את שורת 2 microtask ב־queueMicrotask, כדי שהיא תרוץ מיד אחרי הקוד הרגיל.
עטוף את שורת 3 timeout ואת שורת 4 timeout later, כל אחת ב־setTimeout משלה. setTimeout(fn, ms) מריצה את הפונקציה fn פעם אחת, לאחר ms אלפיות השנייה. שורה 4 מוגדרת לפני שורה 3, ולכן היא זקוקה להשהיה ארוכה יותר.

node order.js מדפיסה לאחר מכן:

1 sync
2 microtask
3 timeout
4 timeout later

נסה זאת: לפני ההרצה, נחש מה יהיה הסדר. לאחר מכן לחץ על Run; הטרמינל יציג $ node order.js. עכשיו תן לשני הטיימרים השהיה של 0 והריץ שוב: 4 timeout later יודפס עכשיו לפני 3 timeout, כי כשההשהיות שוות, הטיימר שהוגדר ראשון רץ ראשון. החזר לשורה 4 את ההשהיה הארוכה יותר לפני הלחיצה על "בדיקה".

נסו בעצמכם

// גרמו לשורות האלה להדפיס לפי סדר המספרים בלי להזיז אותן.
// במקום זאת, עטפו אותן ב־queueMicrotask וב־setTimeout.
console.log('4 timeout later');
console.log('3 timeout');
console.log('2 microtask');
console.log('1 sync');