קודקודייל
  • קודקודייל
  • מי אתם קודקודייל?
  • קורסים בחינם
  • צרו קשר
  • בניית אתרים
    • וורדפרס
  • נגישות אתרים
  • כל הקטגוריות
    • אנגולר
    • HTML
    • CSS
    • Javascript
    • Typescript
    • NodeJs
    • בלוקציין
  • קודקודייל
  • מי אתם קודקודייל?
  • קורסים בחינם
  • צרו קשר
  • בניית אתרים
    • וורדפרס
  • נגישות אתרים
  • כל הקטגוריות
    • אנגולר
    • HTML
    • CSS
    • Javascript
    • Typescript
    • NodeJs
    • בלוקציין
קודקודייל
  • קודקודייל
  • מי אתם קודקודייל?
  • קורסים בחינם
  • צרו קשר
  • בניית אתרים
    • וורדפרס
  • נגישות אתרים
  • כל הקטגוריות
    • אנגולר
    • HTML
    • CSS
    • Javascript
    • Typescript
    • NodeJs
    • בלוקציין
  • קודקודייל
  • מי אתם קודקודייל?
  • קורסים בחינם
  • צרו קשר
  • בניית אתרים
    • וורדפרס
  • נגישות אתרים
  • כל הקטגוריות
    • אנגולר
    • HTML
    • CSS
    • Javascript
    • Typescript
    • NodeJs
    • בלוקציין
ראשי ♦ Javascript ♦ מה קורה ב- setTimeout(fn, 0)

מה קורה ב- setTimeout(fn, 0)

עידן יצחקי 8 באפריל 2022 אין תגובות

כש-javascript רץ צריך לזכור ולהבין שהוא single threaded, זה אומר שהוא מטפל בכל שורה בזמן שהוא קורא אותה, אז השאלה הברורה היא, מה הוא עושה כאשר יש לו פונקציה לא סנכרונית?

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

מיד נכיר את queue ואת stack , בעזרת שניהם ג'אווה-סקריפט מטפל בהכל.

queue

מיצג את התור להפעלה, שיטת העבודה שלו היא:

ראשון נכנס – ראשון יוצא

stack

מיצג את הערימה להפעלה שיטת העבודה שלו היא:

אחרון נכנס – ראשון יוצא

בנוסף לתור ולערימה יש לנו את המצביע (יש גם את event loop).

single thread

הוא המצביע (מצביע יחיד) שרץ שורה אחרי שורה בקוד ומוציא אותה לפועל.

בנוסף לתור ולערימה יש לנו את המצביע (יש גם את event loop).

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

  1. פונקציה 3
  2. פונקציה 2
  3. פונקציה 1

זה אומר, שהוא יריץ את פונקציה 3 שהיא האחרונה בשרשרת ונקראה מתוך פונקציה 2, אחרי זה ימשיך להריץ את שאר השורות שנשארו בפונקציה 2 ואחרי זה לפונקציה 1.

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

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

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

בין הערימה לתור יש לולאה (even loop) שבודקת את מצב הערימה, אם היא ריקה ורק אם היא ריקה, הלולאה פונה לתור.

אם יש משהו בתור, הוא מועבר לערימה ושם הוא מוצא לפועל.

ולכן כאשר אנחנו נכתוב את הקוד הבא:

function logit() {
    console.log('1');
    setTimeout(() => { console.log('2'); }, 0);
    console.log('3');
}
logit();

אנחנו נקבל הדפסה של 1, אחרי זה 3 ולבסוף 2.

למרות שזמן ההפסקה שלנו 0 בשורה 3 מה שקורה הוא:

  • שורה מספר 2 מופעלת
  • שורה מספר 3 נשלחת ל-API של הדפדפן ומשם לתור
  • שורה מספר 4 מופעלת

ועכשיו כאשר הערימה ריקה, ה-event loop מעביר את ה-callback של ה-timeout חזרה לערימה ושם הוא מופעל.

עכשיו לשאלה, למה זה טוב לנו?

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

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

פוסטים קשורים:

תמונת אווירה של שורות מידעמה אפשר לעשות עם js console מדריך nodeJS Express – חלק 3 – routes מדריך nodeJS Express – חלק 5 – server תמונת אווירה של קוביות ואת מוזהבתמדריך javascript למתחיל 101 (שיטת כתיבה)
javascript

אודות המחבר

עידן יצחקי להציג את כל הפוסטים של עידן יצחקי


« פוסט קודם
פוסט הבא »

השארת תגובה

ביטול

חיפוש באתר
בחירת העורכים
29 בדצמבר 2023 עידן יצחקי

שדה טקסט עשיר עם תמונות

אתם הולכים להיות מופתעים עד כמה HTML יכול להיות חכם ולבצע משהו כל כך מורכב, שאם אנחנו היינו רוצים ליצור

1 באוקטובר 2021 עידן יצחקי

איך למשוך דינמית favicon של אתרים אחרים ב-JS

בפוסט זה נראה איך אפשר על פי לינקים בדף למשוך את ה-favicon מהדומיין שלהם באופן דינמי, בדיקה של תקינות התמונה

פופולרי
Javascript functions – היכרות עם סוגי פונקציות
Javascript
21 בדצמבר 2024 אין תגובות
Nested routing in angular standalone component
Typescript
15 בנובמבר 2024 תגובה אחת
בחרו לפי תגיות
angular blockchain css ethers express front-end fullstack GQL html javascript next js nextjs nodejs react hooks reactjs solidity webgl אנגולר בלוקציין וורדפרס לימודי אנגולר לימודי וורדפרס לימוד ריאקט מדריך front-end מדריך GQL מדריך אנגולר מדריך וורדפרס מדריך חינם react מדריך ריאקט מפתח בלוק מפתח בלוקציין מתכנת front-end מתכנת בלוקציין מתכנת פרונט סולידיטי קורס front end קורס fullstack קורס nextjs קורס אנגולר קורס בלוקציין קורס בלוקציין בחינם קורס סולידיטי קורס ריאקט קורס תכנות קורס תכנות בחינם
סינון על פי קטגוריות
CSS fullstack HTML IIS Javascript nodeJs SEO Typescript אנגולר בלוקציין בניית אתרים וורדפרס חיפוש עבודה כלים נוספים כללי נגישות קורסים ריאקט תלת מימד תקלות ופתרונות
צור קשר
כל הזכויות שמורות לקודקודייל
ליצירת קשר: @ קודקודייל
גלילה לראש העמוד
דילוג לתוכן
פתח סרגל נגישות כלי נגישות

כלי נגישות

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