JavaScript setTimeout Tutorial - כיצד להשתמש במקביל JS של שינה, המתנה, עיכוב והשהייה

JavaScript היא שפת האינטרנט. וזה לא היה אותו דבר מאז שחרור ES5. יותר ויותר רעיונות ותכונות מועברים משפות שונות ומשולבים ב- JavaScript.

אחת מהתכונות הללו הן הבטחות, שהן ככל הנראה התכונה הנפוצה ביותר ב- JavaScript לאחר שחרור ES5.

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

ספוילר: JavaScript אף פעם לא ממש "מושהה".

TL; DR

הנה קוד ההעתקה לפסטה שעושה את העבודה:

/** * * @param duration Enter duration in seconds */ function sleep(duration) { return new Promise(resolve => { setTimeout(() => { resolve() }, duration * 1000) }) }

אבל מה באמת קורה כאן?

setTimeout והבטחות מזויפות

בואו נראה דוגמה מהירה באמצעות הטקסט לעיל (נדון במה שקורה בו בהמשך):

async function performBatchActions() { // perform an API call await performAPIRequest() // sleep for 5 seconds await sleep(5) // perform an API call again await performAPIRequest() }

פונקציה זו performBatchActions, כאשר היא נקראת, פשוט מבצעת את performAPIRequestהפונקציה, ממתינה כחמש שניות ואז קוראת שוב לאותה פונקציה. שימו לב איך כתבתי בערך 5 שניות , ולא 5 שניות.

הערה חזקה לשים שם: הקוד שלעיל אינו מבטיח שינה מושלמת. המשמעות היא שאם תציין משך זמן שנניח שנייה אחת, JavaScript אינו מתחייב שהוא יתחיל להריץ את הקוד לאחר השינה בדיוק לאחר שנייה אחת.

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

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

JavaScript הוא בעל הברגה יחידה

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

שקול דף אינטרנט שבו יש לך מספר לחצנים ואתה מריץ את הקוד לעיל כדי לדמות שינה למשך 10 שניות. מה אתה מצפה שיקרה?

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

אז איך JavaScript השהה למעשה שרשור אחד, מבלי להשהות אותו באמת?

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

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

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

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

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

סיכום

הגעת לכאן להוראת שינה פשוטה ב- JavaScript ובסופו של דבר למדת על אחד הדברים המרכזיים ב- JavaScript - לולאות אירועים! מדהים, לא?

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

שָׁלוֹם