מה זה פקודה א-סינכרונית בJavascript

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

פקודות סינכרוניות וא-סינכרוניות

פקודות סינכרוניות

פקודות סינכרוניות זה פעולות שלא יתחילו לפני שקודמתן סיימה,לדוגמא:

console.log("one")
console.log("two")
console.log("three")

בדוגמא כל script מועבד ומתורגם לשפת מכונה, ורק לאחר סיום הפקודה מועבר לפקודה הבאה.

פקודות א-סינכרוניות

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

console.log("one")
setTimeout(() => {
console.log("two")
},2000)
console.log("three")

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

למה אנו זקוקים לפקודות א-סינכרוניות

בעיית הBlocking

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

מתחת למכסה המנוע

כדי להגביר את ההבנה איך התהליך של פקודות א-סינכרוניות קורא מאחורי הקלעים,
צריך לדבר קצת על המנוע של javascript,זה שאחראי לקחת את הקוד שלנו לעבד ולהוציא לפועל.
אז זה הוא החלק שאחראי על עיבוד ותרגום הפקודות במנוע של javascript:

נעבור חלק חלק ונבין מה תפקידו בקוד ואיפה מטופלות בקשות סינכרוניות לעומת א-סינכורניות.

Call Stack

בעולם התוכנה תפקיד הstack זה לקחת את הקוד לבצע ולתרגם לשפת מכונה,
כל הפקודות מועברות בstack אחת אחרי השניה עד שאין יותר פקודות והstack מתרוקן.
שמדובר על javascript הcall stack לא יכול להכיל יותר מפקודה אחת,
פונקציות נחשבות כפקודה אחת שמכילה מיני פקודות לכן פונקציה תשהה בcall stack עד שכל המיני פקודות יסתיימו.

תפקיד הcall stack זה לעבד ולתרגם את הפקודות, אבל מה קורה שיש פקודה שהיא א-סינכרונית,
פקודה שזמן ההמתנה לביצוע לא ידוע יכולה לגרום לcall stack לא לקבל פקודות נוספות דבר שיוביל ל2 דברים,
זמן טעינה איטי, ובעיית הBlocking שזה אי יכולת לקבל javascript חדש.

WebAPI

תפקידו של הWebApi זה לטפל בבקשות הא-סינכרוניות,
הבקשות שנצטרך להמתין זמן ידוע/לא ידוע כדי לבצע אותם.
כל הבקשות הא-סינכרוניות מועברות להמתנה עד שהם יהיו מוכנות לביצוע בWebAPI.

Callback queue

תפקידו של הQueue זה בעצם לשמש כמעין תור לבקשות הא-סינכרוניות שמוכנות לביצוע.
הבקשות הא-סינכרוניות שמוכנות כעת לביצוע ממתינות לפי הסדר שנכנסו לתור.
כלומר הבקשה הראשונה שהבשילה לביצוע תכנס ראשונה ותבוצע ראשונה כמו בתור לקופאית בסופר.

Event Loop

החלק האחרון בשרשרת האירועים האלה זהו הEvent Loop,
תפקידו של הEvent Loop זה להאזין לcall Stach ברגע שהוא פנוי וסיים את כל הפקודות הסינכרוניות,
ולהכניס את הפקודות הא-סינכרוניות שממתינות בQueue לביצוע.

סיכום:

במדריך זה למדנו מהם פעולות סינכרוניות וא-סינכרוניות,
איך כל החלקים במנוע של javascript עובדים כדי לבצע את הפעולות בצורה היעילה והמהירה ביותר.