ראיון עבודה הוא דבר שכולנו חוששים ממנו תמיד מלחיץ\מרגש תלוי באופי האישי שלכם אבל אני בטוח ב99 אחוז שכולנו לא באים לראיון עבודה ונשארים אדישים. לדעתי זה נובע מכך שלמעשה ראיון עבודה הוא סוג של בוחן. בוחנים אותנו ביכולות הפיתוח שלנו, וכן כמו בכל מבחן חייבים ללמוד ולהתכונן היטב.
ראיון עבודה כמתכנת פרונט אנד front-end
בקצרה אציין כי הטיפ של Debounce in Javascript לראיון עבודה הוא בתחום הפרונט אנד אז אם אתם אינכם מפתחי פרונט עדיין הקונספט הזה קיים ושווה לדעת, אבל פה אציג דוגמה בjavascript שמתאימה פרונטיסטים.
למה שואלים על Debounce in Javascript בראיון עבודה?
אין לי תשובה חד משמעית אליכם, מה שבטוח זה שבראיונותי האחרונים זה מה ששאלו, כל הקונספט של Debounce משלב היגיון בריא בצורת הכתיבה וההבנה שלכם ולדעתי זה מה שהם מחפשים לראות.
מה זה Debounce
הקונספט של Debounce in Javascript הוא בעיקר מה לחסוך בביצועים, למשל (כמה דוגמאות):
- חיפוש עם אוטוקופליט – אם כל אות שהיוזר ילחץ תשלחו בקשה לסנן את המידע אז יהיו המון קריאות מיותרות שירוצו. עם Debounce in Javascript אפשר להמתין עד שהיוזר יסיים להקליד , ואז לשלוח את הבקשה.
- פעולות של תזוזת עכבר, אם המשתמש צריך להזיז את הסמן לנקודה מסויימת ואז לעצור אין סיבה לתפוס את כל האיוונטים , אפשר גם פה להשתמש ב Debounce ולחסוך בפעולות יקרות
- שימוש ב scroll גם כן יכול שווה להשתמש ב Debounce.
- לחצית על כפתור גם כן ניתן לעשות שימוש עם Debounce . לשמל כפתור של עגלה אם היוזר לחץ בטעות פעמיים או 3 אין סיבה לשלוח 3 בקשות, שימוש ב Debounce יחסוך גם פה.
וש עוד המון מקרים שאפשר להשתמש ב Debounce. (מספיק דוגמאות לדעתי)
טוב בטח הבנתם את הרעיון הכללי מה עושה Debounce ולמה הוא שימושי. אבל יותר מזה, חשוב להבין לעומק ואיך כותבים פונקציה שיודעת לטפל במקרים הללו. אז עוד קצת הסברים ואז ניגש לדוגמה.
איך עובד Debounce in Javascript
השימוש ב Debounce למעשה צד את הקליק \ האיוונט האחרון על ידי timeout, בהנחה שמשתמשים עושים פעולות במהירות מסויימת ולכן נרצה למנוע פעולות לא נחוצות, על ידי כך שתיהיה לנו פונקצית Debounce שתקבל 2 משתנים, אחת תיהיה פונקציה (שתעשה את הפעולה הרצויה , למשל תפעיל את המיון בחיפוש) ומשתנה נוסף שיגדיר את הtimeout . ולמעשה אם לא "הגענו" למשך הזמן (כלומר עדין קיים הטיימאאוט) שהגדרנו ונוצר פעולה נוספת, אז הפעולה הקודמת תתבטל ובמקומה תתחיל הפעולה הבאה, ברגע שכן משך הזמן בין הפעולות הסתיים (מימש את timeout) אז כן תשלח הבקשה, יש להשמש ב closures לצורך המימוש. לאחר הדוגמה אסביר עוד קצת.
להלן דוגמה פשוטה של קליק עם Debounce
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Debounce in Javascript</title>
</head>
<body>
<button id="button">Click</button>
</body>
<script>
const debounce = (fn, delay) =>{
let timeoutId;
return function(...args){
if(timeoutId){
clearTimeout(timeoutId);
}
timeoutId = setTimeout(()=>{
fn(...args)
},delay)
}
}
document.getElementById('button').addEventListener('click',debounce((e)=>{console.log('click')},2000));
</script>
</html>אז כפי שאתם רואים, יש לנו שימוש ב closure, כך שהפונקציה מחזירה פונקציה אנונימית ומשתמשת בסקופ של הפונקציה החיצונית. כך אנחנו יכולים לעשות את השימוש נחוץ לנו עם timeoutId . מה שקורה בעצם זה שבמידה וקיים טיימאאוט אנחנו נאפס אותו כל קליק שאינו עולה על 2 שניות הפרש מהקליק הקודם וכן יריץ שוב את טיימאאוט (עם הפונקציה fn) ובמידה וכן הסתיים התהליך אז הפונקציה שלנו (במקרה הזה fn) תצא לפעול.
לסיכום Debounce
קודם כל זה שימושי מאד ויכול לשפר את החוויה של היוזר וגם לשפר את הביצועים של הממשק.
כמו כן ראיתם שמדובר בקוד יחסית פשוט אבל משמש קונבנציות כמו closure שלרוב חשוב לדעת לממש, וכן בא לידי ביטוי בראיונות עבודה כי רוצים לראות שיש לכם את הידע והמיומנות בעבודה שכזו כך שפונקציה מחזירה פונקציה ויש חשיבות לסקופ.
אבל למה צריך לטפל בזה בUI ?
יש האומרים שחלק מהבקשות שנשלחות לשרת כבר מטופלות בצד השרת אין סיבה לטפל בUI אבל כן כדאי להגן גם מצד הUI על המקרים הללו, כמו כן אם מדובר בכפתורים או כל מיני טריגרים שלא רוצים שירוצו כמה פעמים אפשר גם לשים disable על אותו פתור או לשים גם loader ולהבטיח מקסימום ביצועים וגם חיווי למשתמש .
הסבר מעולה!