הבנת סינכרוני אסינכרוני ב - JavaScript חלק 2

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

בקשה מוזרה

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

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

במקום לחכות, הוא שואל את מר ה להשאיר הודעה חדשה עבור המשימה בתור לאחר שעברו השעות, ועובר אל ההודעה הבאה.

חמש שעות אחרי; מר ח עדכונים את התור עם הודעה חדשה. אחרי שהוא עשה עיבוד כל ההודעות שנצברו לפני מר H, מר X מבצע את המשימה המבוקשת שלך. אז, ככה, אתה יכול להשאיר בקשה להיות נענתה במועד מאוחר יותר, ולא לחכות עד שזה יתמלא.

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

1. setTimeout () שיטה

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

 setTimeout (פונקציה, זמן עיכוב, arg ...) 

ה arg ... פרמטרים עבור כל ארגומנט הפונקציה לוקח, ו זמן עיכוב הוא להוסיף מילישניות. להלן אתה יכול לראות דוגמה קוד פשוט, כי יציאות “היי” במסוף לאחר 3 שניות.

 setTimeout (function () console.log ('hey'), 3000); 

פעם אחת setTimeout () מתחיל לרוץ, במקום לחסום את ערימת השיחה עד למועד העיכוב המצוין נגמר, א טיימר מופעלת, ואת ערימת השיחה מתרוקן בהדרגה עבור ההודעה הבאה (בדומה להתכתבות בין מר X ומר H).

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

2. AJAX

AJAX (אסינכרוני JavaScript ו- XML) הוא מושג המשתמש XMLHttpRequest (XHR) API ליצור בקשות שרת ו לטפל בתגובות.

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

אז, בעצם המטרה היא לבצע בקשות מבלי לטעון מחדש את הדף. עכשיו, איפה הוא “אסינכרוני” בזה? רק באמצעות קוד XHR (אשר נראה בעוד רגע) לא אומר שזה AJAX, כי ה- XHR API יכול לעבוד בשני דרכים סינכרוני ואסינכרוני.

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

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

דוגמה קוד 1

דוגמה זו מציגה א XMLHttpRequest יצירת אובייקט. ה פתוח () שיטה, מאמת את כתובת האתר של הבקשה ואת שלח () שיטה שולחת את הבקשה.

 var xhr = XMLHttpRequest חדש (); xhr.open ("GET", url); xhr.send (); 

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

דוגמה קוד 2

ה hello.txt הקובץ בדוגמה זו הוא קובץ טקסט פשוט המכיל את הטקסט 'שלום'. ה תגובה רכוש של XHR אינו חוקי, שכן הוא לא פלט את הטקסט 'שלום'.

 var xhr = XMLHttpRequest חדש (); xhr.open ("GET", "hello.txt"); xhr.send (); document.write (xhr.response); // חוט ריק 

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

 var xhr = XMLHttpRequest חדש (); xhr.open ("GET", "hello.txt"); xhr.send (); xhr.onload = function () document.write (this.response) // כותב "שלום" למסמך 

התגובה בתוך אירוע הטעינה פלט 'שלום', את הטקסט הנכון.

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

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

 var xhr = XMLHttpRequest חדש (); xhr.open ("GET", "hello.txt", false); xhr.send (); document.write (xhr.response); // כותב "שלום" לתעד 

למה ללמוד את כל זה?

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

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