בהנחה שאנו מכירים כבר את השפה, איך בת׳כלס עובד המנוע שמריץ אותה (ומה שמסביבו)?
[ספציפית פעולות אסינכרוניות]


אבל קודם כל.. חידה:

מה יקרה אם נריץ את הקוד הבא, ולמה?

קוד PHP:

 for ( var i=0; i<5; i++ )
    setTimeout( function() { console.log(i) }, 0 ); 


כלומר לולאה שקוראת לפונקציית הדפסת האינדקס הרץ, עם השהיית זמן אפסית.
האם התוצאה תהיה זהה תמיד?

ואם הגבול העליון יהיה גדול יותר, זה ישנה משהו?

קוד PHP:

 for ( var i=0; i<500; i++ )
    setTimeout( function() { console.log(i) }, 0 ); 


ומה יקרה אם נתעסק באינדקס הרץ i בתוך הלולאה?

קוד PHP:

 for ( var i=0; i<50; i++ )
    setTimeout( function() { console.log(i--) }, 0 ); 


ומה אם לגמרי נשתגע?

קוד PHP:

 for ( var i=0; i<50; i++ ) {
    setTimeout( function() { console.log(i--) }, 0 );
    console.log(i);
} 


הסרטון הבא מסביר איך בג׳אווה סקריפט מתנהלים מחסנית הקריאות (call stack), תור המשימות, טיפול באירועים וכו׳.

לצפייה במקור באתר Vimeo, לחצו כאן.

כעת נוכל גם להבין את תוצאות כל דוגמאות הקוד לעיל.

תוספים לפורום
קורס לטינית בלעדי לפרש, בפורום שפות ובלשנות.

ציטוט:

במקור נכתב על ידי ShoobyD אבל קודם כל.. חידה: מה יקרה אם נריץ את הקוד הבא, ולמה? [INDENT] קוד PHP:  for ( var i=0; i<5; i++ )     setTimeout( function() { console.log(i) }, 0 );  כלומר לולאה שקוראת לפונקציית הדפסת האינדקס הרץ, עם השהיית זמן אפסית. האם התוצאה תהיה זהה תמיד? ואם הגבול העליון יהיה גדול יותר, זה ישנה משהו? קוד PHP:  for ( var i=0; i<500; i++ )     setTimeout( function() { console.log(i) }, 0 );  ומה יקרה אם נתעסק באינדקס הרץ i בתוך הלולאה? קוד PHP:  for ( var i=0; i<50; i++ )     setTimeout( function() { console.log(i--) }, 0 );  ומה אם לגמרי נשתגע? קוד PHP:  for ( var i=0; i<50; i++ ) {     setTimeout( function() { console.log(i--) }, 0 );     console.log(i); }

קודם כל אנחש:

בקוד הראשון יודפס 5 פעמים 5.
בקוד השני יודפס 500 פעמים 500.
מאחר ומודפס אותו הדבר אין מה לדבר על סדר.
בהנחה שזו לא הייתה הכוונה אפשר להשתמש ב-let או לעשות ש-f תקבל פרמטר.

בקוד השלישי יודפסו המספרים מ-50 עד 1. אני מנחש שזה מאותה סיבה שלמעלה הודפס אותו מספר, ה-capture מתבצע by reference (או משהו כזה).

בקוד הרביעי יודפסו המספרים מ-0 עד 49 בלולאה. אחרי זה יודפסו המספרים מ-50 עד 1 ב-callback-ים כמו בקוד השלישי.

לגבי הסדר: שמעתי פעם שהסדר שבו נקראים כל ה-callback-ים הוא לפי הסדר שבו עושים להם queue, אבל שמעתי גם על מקרים שבהם קרו דברים מוזרים. נטען שזה באגים, אבל מאחר ולא קראתי את ה-spec ואני לא בקי בכל תועבת הווב הזאת אני לא בטוח האם זה נכון.

ראיתי את הסרטון. נורא. בבהתחלה לא רציתי לראות כי זה 20 דקות. מה נראה לך?
אחר כך אמרתי לעצמי אולי זה שווה את זה. ראיתי. לקח לו 5 דקות להסביר מה זה מחסנית קריאות.
גרוע. לפי ההסבר שלו זה צריך להיות בסדר הקריאות ל-setTimeout.

בדיקה: צדקתי ב-1-3. ב-4 משום מה הודפס 0 עד 49, אחרי זה undefined ואחרי זה 50 עד 1. נתתי לזה 2 דקות. לא הבנתי למה. אחכה להסבר.

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

נערך

ברביעי אצלי לא הודפס undefined.
באיזה דפדפן אתה?

ציטוט:

במקור נכתב על ידי פסטן לגבי הסדר: שמעתי פעם שהסדר שבו נקראים כל ה-callback-ים הוא לפי הסדר שבו עושים להם queue

למה אתה קורא "הסדר שבו עושים להם queue"?
ההכנסה לתור נעשית בידי המנגנונים של הדפדפן (מה שהוא קרא להם WebAPIs), והסדר יכול להיות שונה מסדר הקריאות לאותם מנגנונים.
אם נעשה לדוגמא:

קוד PHP:

 for ( var i=0; i<5; i++ ) {
    setTimeout( function() { console.log(i) }, 2000 );
    setTimeout( function() { console.log(i*2) }, 1000 );
} 


אז ברור שה־timeouts עם i*2 יסתיימו קודם, ולכן ייכנסו לתור קודם, ולכן יודפסו למעשה חמישה פעמים 10 ואז חמישה פעמים 5.

ציטוט:

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

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

ציטוט:

במקור נכתב על ידי פסטן בדיקה: צדקתי ב-1-3. ב-4 משום מה הודפס 0 עד 49, אחרי זה undefined ואחרי זה 50 עד 1. נתתי לזה 2 דקות. לא הבנתי למה. אחכה להסבר.

האמת שגם פה צדקת.
זה לא באמת שמודפס undefined, זה פשוט הקונסול אומר לך מה הסקריפט מחזיר, שבמקרה זה הוא כלום.
[האם בכלל יציג זאת בת׳כלס תלוי בדפדפן שלך]
הקטע הוא שהקונסול מראה לך מה ערך ההחזרה לפני שמתבצעים ה־callbacks, ולכן פה הוא נדחף באמצע.

גם אם תעשה:

קוד PHP:

 console.log("hi"); 


יודפס:

קוד:

hi
undefined

כי console.log לא מחזירה כלום.

ואם תעשה:

קוד PHP:

 console.log("hi"); x=17; 


יודפס:

קוד:

hi
17

אם, לעומת זאת, נדפיס את התוצאה לדף במקום לקונסול, באופן הבא:

קוד PHP:

 for ( var i=0; i<5; i++ ) { 
    setTimeout( function() { document.write(i--) }, 0 ); 
    document.write(i); 
} 


אז לדף יודפס 0123454321 בעוד הקונסול יראה undefined.

תוספים לפורום
קורס לטינית בלעדי לפרש, בפורום שפות ובלשנות.

ציטוט:

במקור נכתב על ידי ShoobyD למה אתה קורא "הסדר שבו עושים להם queue"? ההכנסה לתור נעשית בידי המנגנונים של הדפדפן (מה שהוא קרא להם WebAPIs), והסדר יכול להיות שונה מסדר הקריאות לאותם מנגנונים. אם נעשה לדוגמא: קוד PHP:  for ( var i=0; i<5; i++ ) {     setTimeout( function() { console.log(i) }, 2000 );     setTimeout( function() { console.log(i*2) }, 1000 ); }  אז ברור שה־timeouts עם i*2 יסתיימו קודם, ולכן ייכנסו לתור קודם, ולכן יודפסו למעשה חמישה פעמים 10 ואז חמישה פעמים 5.

לזה בדיוק אני מתכוון.
הבאת עכשיו שני מקרים קלים שבהם התוצאה די דטרמיניסטית - לקרוא מספר פעמים עם 0, ולקרוא פעם אחת עם 2000ms ופעם עם 1000ms. אבל הנה לך חידה בחזרה, בלי לבדוק, מה ידפיס הקוד הבא?

קוד:

 for ( var i=0; i<50; i++ ) 
    setTimeout( function(j) { console.log(j) }, (i%5)*1000, i );

והקוד הבא?

קוד:

 for ( var i=0; i<50; i++ ) 
    setTimeout( function(j) { console.log(j) }, (i%5)*100, i );

והקוד הבא?

קוד:

 for ( var i=0; i<50; i++ ) 
    setTimeout( function(j) { console.log(j) }, (i%5)*10, i );

והקוד האחרון?

קוד:

 for ( var i=0; i<50; i++ ) 
    setTimeout( function(j) { console.log(j) }, i%5, i );

עכשיו בדוק. אחרי זה הסבר.

ציטוט:

במקור נכתב על ידי ShoobyD האמת שגם פה צדקת. זה לא באמת שמודפס undefined, זה פשוט הקונסול אומר לך מה הסקריפט מחזיר, שבמקרה זה הוא כלום. [האם בכלל יציג זאת בת׳כלס תלוי בדפדפן שלך] הקטע הוא שהקונסול מראה לך מה ערך ההחזרה לפני שמתבצעים ה־callbacks, ולכן פה הוא נדחף באמצע.

כן, בסוף הבנתי את זה. נורא.

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

ציטוט:

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

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

ציטוט:

במקור נכתב על ידי פסטן אבל הנה לך חידה בחזרה, בלי לבדוק, מה ידפיס הקוד הבא?

לכאורה היה אמור להיות מודפס בכולם המספרים בעלי שארית 0 מודולו 5 לפי הסדר (0, 5, 10, 15..), לאחריהם שארית 1, שארית 2 וכך הלאה.
אלא מאי, שזמן ההשהיה הולך וקטן עם הדוגמאות, כך שבשלב מסוים אמורים ה־timeouts לפוג ולהיכנס לתור עוד לפני שהלולאה מסתיימת, כך לדוגמא ה־timeout של 1 יסתיים עוד לפני שבכלל יתחיל ה־timeout של 5, ועל־כן יודפס לפניו.
כלומר לדעתי התוצאה פה לא תהיה דטרמיניסטית.

[בגלל זה בדוגמא שהבאתי לעיל, עם ה־i וה־i*2, קבעתי זמני השהייה יחסית ארוכים, אחרת הקביעה שם לא בטוח שהייתה מתקיימת]

תוספים לפורום
קורס לטינית בלעדי לפרש, בפורום שפות ובלשנות.

מי שרוצה לנסות את כלי ההמחשה הוויזואלית שהוא בנה, הוא נמצא פה:

http://latentflip.com/loupe/

יש שם כמעט את אותה הרצאה (מ־JSConf 2014), רק שמדקה 17 בערך הוא עובר להמחשה בזמן אמת במקום מצגות
נותן עוד כל מיני דוגמאות, וגם מסביר על איך הכלי עובד.

תוספים לפורום
קורס לטינית בלעדי לפרש, בפורום שפות ובלשנות.