Threads
בשיעור זה אנו לומדים על תהליכונים Threads בג'אווה סקריפט. אנו מכירים את הפונקציות setTimeout ו-clearTimeout להפעלת פונקציה פעם אחת בטרד נפרד וביטולה, את setInterval ו-clearInterval להפעלה חוזרת של פונקציה בכל פרק זמן, ובונים עם כלים אלה שעון חי ואנימציית תמונות מתחלפות עם טעינה מוקדמת.
להורדת קוד מקור של כל הדוגמאות בקורס JAVA SCRIPT למתחילים -לחץ כאן לתלמידי המכללה בלבד
להורדת קוד מקור של כל הדוגמאות בקורס JAVA SCRIPT למתקדמים- לחץ כאן לתלמידי המכללה בלבד
פרקי ההרצאה: Threads
תמלול ההרצאה: Threads
הטקסט המלא של הדקות הראשונות בהרצאה «Threads» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אוקיי, הדבר הבא שאנחנו הולכים לראות בג'אווה סקריפט נקרא טרדס. טרדס זה תהליך נפרד מבחינת זמן CPU, כלומר מעבד המחשב, שאנחנו יכולים להפעיל אותו במקביל לכל חישוב או לכל פעילות אחרת של הדפדפן.
אנחנו יכולים לקחת פונקציה ולומר לדפדפן להפעיל אותה בעוד פרק זמן מסוים של מילי שניות, או אפילו בעוד 0 מילי שניות שזה יהיה עכשיו, אבל הפונקציה הזאת תרוץ במקביל לפעילות הרגילה של הדפדפן וכך לא תעכב אותנו בעצם.
ניתן לעשות את זה אם יש איזשהו חישוב מסיבי ואנחנו רוצים לעשות אותו בנפרד, ניתן לעשות את זה כשאנחנו רוצים לבצע פעולה בעוד פרק זמן מסוים, ואז אנחנו יכולים פשוט לתת הוראה לפונקציה לפעול בעוד מספר מילי שניות והמערכת תפעיל אותה במקביל אלינו.
אז בואו נניח שאנחנו רוצים להגדיר או בלחיצה על כפתור להציג תמונה אבל לא לא רוצים להציג אותה מיידית, אלא בעוד נניח שתי שניות מהלחיצה. ומה שאנחנו צריכים לעשות, קודם כל בואו נגדיר כפתור input type שווה button, value נגדיר כ-show image ו-on-click נקרא לפונקציה שנקרא לה show image async.
async זה קיצור של אסינכרוני שזה אומר מקבילי, כלומר בנוי בטרד נפרד. אוקיי, אז בואו נבנה את הפונקציה הזאת, יש לנו פה function ב-JavaScript, ואנחנו רוצים להתחיל טרד נפרד.
אז בעצם בשביל להתחיל טרד נפרד אנחנו צריכים לקרוא ל-window.settimeout. timeout מקבלת משהו שנקרא קוד ו-delay. הקוד זה בעצם איזו פונקציה להפעיל וה-delay זה בעוד כמה זמן להפעיל אותה.
כאשר יש שתי שיטות לשלוח את המידע לקוד. שיטה ראשונה פשוט לכתוב את השם של הפונקציה בלי הסוגריים, כלומר אני לא רוצה בעצמי לקרוא לה פונקציה אלא אני רוצה שהפונקציה set timeout תקרא לה ולכן מה שאני אעשה אני פשוט רושם את השם שלה.
אז בואו נבנה פה פונקציה שנקרא לה show image שהיא בעצם תציג את התמונה ואז בשביל להפעיל אותה בעוד שתי שניות פשוט נשלח רק את השם שלה. שימו לב אני לא פותח סוגריים ואני לא קורא לה בעצמי אלא אני נותן רק את השם שלה בכדי שהפונקציה set timeout תקרא לה בעצמה ואז אני נותן תוך כמה זמן אני רוצה לקרוא לה
וזה אומר במילי שניות, אז 2,000 מילי שניות זה 2 שניות. מה אנחנו עושים בפונקציה show image? בואו נגדיר פה object image, אז יש לנו IMG, Alt לא מצביע על שום דבר, או לא מכיל שום דבר, כלומר הטקסט שמופיע מאחורי התמונה אין לי כרגע, וזאת התמונה שלי.
ניתן לה ID, וכעת אנחנו יכולים על ידי document getElementByID לקבל את ה-ID של התמונה, לגשת ל-SRC שלה, ולהכניס לתוכו את השם המלא של התמונה.
אז הכנתי בתיקייה שלנו איזושהי תמונה, בואו נפתח את התיקייה ונגיע לתמונה שנקראת סמיילי. אז יש לנו בעצם פה את התמונה smiley.jpeg ומה שקורה כאן זה בלחיצה על הלחצן אנחנו לא מציגים את התמונה אלא אנחנו הולכים לקרוא ל-window.settimeout לתת הוראה לקרוא לפונקציה show image בעוד
שתי שניות. לא רק זה שלא אני הולך לקרוא לפונקציה show image, אלא windows.settimeout הולכת לקרוא לפונקציה show image בעוד שתי שניות, אלא גם הקריאה עצמה מתבצעת בצורה מקבילה לכל פעילות אחרת שמתרחשת בדפדפן.
וזה מה שנקרא טרד נפרד. כעת אנחנו יכולים להריץ את התוכנית ולראות מה קורה בלחיצה על הלחצן. אוקיי, אז בואו נריץ. אני לוחץ על הלחצן, 3, 2, 1, יש לנו פה לחיצה, ואחרי שתי שניות התמונה מוצגת.
זאת אומרת שלא אני הצגתי את התמונה בפיזית בקוד אלא קראתי לטרד נפרד שהוא בעצם אחרי שתי שניות הציג את זה. אוקיי בואו נגדיל לחמש שניות נרפרש נלחץ וכעת אחרי חמש שניות המערכת מציגה לנו את התמונה. בכוונה אני לוקח טיפה זמן יותר גדול כי אני רוצה לראות איך אני בעצם יכול לבטל את הפעילות של הטרד.
אוקיי אז ברגע של אחת הלחצן אני הולך בעצם להציג את התמונה איך אני מבטל את ההצגה ובשביל לבטל את הפעילות של הטרד אני צריך להגדיר משתנה גלובלי נקרא לו טרד ואני רוצה לקחת את המשתנה הזה ולהכניס לתוכו את מה שחוזר מהפונקציה set timeout כרגע הטרד הזה זה משתנה שמחזיק לי את הטרד האמיתי שרץ ברקע וכל מה שאנחנו צריכים לעשות עכשיו זה
דרך המשתנה הזה לבטל את הטרד אז בואו נבנה עוד לחצן לאורך ביטול הטרד נקרא לו cancel show נקרא לפונקציה cancel show נבנה את הפונקציה הזאת וכעת יש לנו את הפונקציה window.clear timeout clear timeout אומרת לי תביא לי בבקשה את ה timeout id וזה בעצם המשתנה שהתקבל מהפונקציה set timeout ואני יכול עכשיו לשלוח את הפונקציה הזאת את המשתנה הזה ובזה בעצם ביטלתי את הטרד אוקיי
בואו נבדוק את זה אז למעשה ואולי באמת נחזיר את זה לשתי שניות, שנראה בעצם שהביטול מתבצע. אז ראשית, נחזור למצב שאנחנו כן מציגים את התמונה אחרי שתי שניות.
אז אני לוחץ על הכפתור, ממתין שתי שניות, והתמונה מוצגת. עכשיו אני מרפרש, לוחץ על show, אבל מיד לוחץ על cancel. ואנחנו רואים שעוברים להם שתי שניות, אבל שום דבר לא קרה. מה שקרה בעצם זה שאנחנו ביטלנו את הפעילות של הטרד הנפרד, בזה שעשינו לו clear timeout, חיסלנו את הטרד, והוא פשוט הפסיק לפעול
אז set timeout מפעילה לנו טרד. בואו נפעיל עוד טרד ביחד עם set timeout אבל שמה שהוא יעשה הוא יעלים את התמונה ואז יהיה לנו בעצם אפקט שהתמונה מוצגת ונעלמת.
אז יש לנו טרד אחד נקרא לו t-show ונשתמש עם המשתנה t-show. אני רוצה פשוט ליצור שני טרדים ולכן אני אקח שני משתנים var t-hide תהייד יתחיל עוד טרד ווינדו נקודה סט טיים אאוט ונקרא לפונקציה אחרת שנקראת הייד אימג' אבל נפעיל אותה אחרי 5 שניות נבנה את הפונקציה הייד אימג' ובפונקציה הייד אימג' נבטל את מה שיש בתוך
הsource בתוך cancel נבטל את שני הטרדים אוקיי בואו נראה איך זה מתנהג אז יש לנו show אימג' ואם אני מבצע show image התמונה מוצגת אחרי שתי שניות ואחרי עוד שלוש שניות היא נעלמת.
אם אני מציג את זה עכשיו ולוחץ cancel אז בעצם ביטלתי את שניהם. אני יכול לבצע גם בדיקה שבעצם המידע שיש בהם הוא לא נל בכדי לדעת האם בעצם אפשר לבטל אותם או אי אפשר לבטל אותם.
זה בעצם דגל שנהוג לבצע. אז מה שנהוג לעשות זה באמת להכניס בתוך המשתנים