remove retired locales (#699)

5 files changed, 0 insertions, 1767 deletions

diff --git a/files/he/learn/javascript/asynchronous/concepts/index.html b/files/he/learn/javascript/asynchronous/concepts/index.html
deleted file mode 100644
index 273c184474..0000000000
--- a/files/he/learn/javascript/asynchronous/concepts/index.html
+++ /dev/null
@@ -1,203 +0,0 @@
----
-title: עקרונות תכנות א-סינכרוני כלליים
-slug: Learn/JavaScript/Asynchronous/Concepts
-translation_of: Learn/JavaScript/Asynchronous/Concepts
----
-<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p>
-  במאמר זה אנחנו נעבור על מספר עקרונות חשובים בנושא תכנות א-סינכרוני וכיצד זה נראה בדפדפנים וב-JavaScript. חשוב להבין עקרונות אלו לפני שממשיכים למאמרים הבאים במודול זה.
-</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">ידע מוקדם:</th>
-   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals.</td>
-  </tr>
-  <tr>
-   <th scope="row">מטרה:</th>
-   <td>
-    הבנה של העקרונות הבסיסיים מאחורי תכנות א-סינכרוני וכיצד אלו באים לידי ביטוי בדפדפנים וב-JavaScript.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Asynchronous_-_א-סינכרוני">Asynchronous - א-סינכרוני?</h2>
-
-<p>
-  באופן נורמלי, קוד של תוכנית רץ בצורה עצמאית, כאשר רק דבר אחד קורה בכל רגע נתון. אם פונקציה מסויימת נשנעת על התוצאה של פונקציה אחרת, היא חייבית לחכות לפונקציה האחרת לסיים ולהחזיר את התוצאה ועד שזה לא קורה, כל התוכנית עוצרת מנקודת מבטו של המשתמש.</p>
-
-<p>Mac אלו המשתמשים ב-, לדוגמא,
-  לפעמים רואים עיגול צבעוני... עיגול זה בעצם אומר למשתמש ״התוכנית הנוכחית שאתה מתמש בה הייתה צריכה לעצור ולחכות שמשהו הסתיים, וזה לוקח זמן..״ </p>
-
-<p><img alt="multi-colored macos beachball busy spinner" src="https://mdn.mozillademos.org/files/16577/beachball.jpg" style="display: block; margin: 0 auto;"></p>
-
-<p>
-  זו חווית שימוש מעצבנת, ולא ממש שימוש יעיל ביכולות המחשב, במיוחד בעידן שלמחשבים יש מספר ליבות מעבד זמינות. אין שום סיבה שאנחנו נחכה למשהו כשאנחנו יכולים להמשיך במקביל בעבודה שלנו בזמן שהמחשב עובד על אותה פעולה ויעדכן אותנו כשהפעולה הסתיימה. זה מאפשר לנו לבצע פעולות אחרות במקביל, וזה בעיקרון הבסיס של תכנות א-סינכרוני - <strong>asynchronous programming</strong>. זה תלוי בסביבת הפיתוח שבה אנחנו משתמשים (דפדני אינטרנט במקרה שלנו) להעניק למפתח APIs שיאפשרו לנו להריץ משימות באופן א-סינכרוני
-
-
-  </p>
-
-<h2 id="Blocking_code">Blocking code</h2>
-
-<p>
-  טכניקות א-סינכרוניות הן שימושיות מאוד, במיוחד בפיתוח web. כאשר יישום web רץ בדפדפן ומריץ שורות קוד מבלי להחזיר את השליטה לדפדפן, הדפדפן יכול להיראות כאילו הוא ״קפא״. זה נקרא <strong>blocking</strong>. הדפדפן חסום מלהמשיך ולטפל בפעולות מצד המשתמש ולבצע פעולות נוספות עד אשר יישום ה-web מחזיר את השליטה למעבד.</p>
-
-<p>
-  נסתכל על מספר דוגמאות על מנת להסביר למה אנחנו מתכוונים ב- blocking
-
-</p>
-
-<p>ב <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing">simple-sync.html</a> דוגמא שלנו (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">או כ דף אינטרנט</a>),
-
-  הוספנו מאזין אירוע מסוג click לכפתור כך שבכל פעם שהכפתור יילחץ, הוא יריץ פעולה שלוקחת המון זמן (מחשבת 10 מיליון תאריכים ואז מחזירה את האחרון לקונסולה) ולאחר מכן מוסיפה פסקה ל-DOM: </p>
-
-<pre class="brush: js">const btn = document.querySelector('button');
-btn.addEventListener('click', () =&gt; {
-  let myDate;
-  for(let i = 0; i &lt; 10000000; i++) {
-    let date = new Date();
-    myDate = date
-  }
-
-  console.log(myDate);
-
-  let pElem = document.createElement('p');
-  pElem.textContent = 'This is a newly-added paragraph.';
-  document.body.appendChild(pElem);
-});</pre>
-
-<p>
-   כשאתם מריצים את הדוגמא למלעלה, פתחו את הקונסולה ואז לחצו על הכפתור - אתם תשימו לב שהפסקה אינה מופיעה עד אשר חישוב התאיריכים הסתיים והוצגה ההודעה לקונסולה. הקוד רץ בסדר שבה הוא מופיע בקוד המקור והפעולה האחרונה לא תרוץ עד אשר הפעולה הקודמת לא סיימה.</p>
-
-<div class="blockIndicator note">
-<p><strong>לתשומת לב</strong>: הדוגמא הקודמת דיי לא מציאותית. אנחנו לעול לא נחשב 10 מיליון תאריכים בתוכנית אמיתית. דוגמא זו נועדה לתת לכם רק את ההבנה של תכנות א-סינכרוני. </p>
-</div>
-
-<p>בדוגמא השנייה שלנו, <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">ראו כדף אינטרנט</a>),
-  אנחנו מנסים לדמות משהו קצת יותר ריאלי שאתם אולי תיתקלו בו בדף אמיתי. אנחנו חוסמים את האינטראקציה של המשתמש עם העיבוד של ממשק המשתמש. בדוגמא זו יש לנו שני כפתורים:</p>
-
-<ul>
- <li>כפתור בשם "Fill canvas" אשר כאשר הוא נלחץ, אלמנט ה- {{htmlelement("canvas")}} מתמלא במיליון כדורים כחולים. </li>
- <li>כפתור בשם "Click me for alert" אשר כאשר הוא נלחץ מופיעה הודעה למשתמש</li>
-</ul>
-
-<pre class="brush: js">function expensiveOperation() {
-  for(let i = 0; i &lt; 1000000; i++) {
-    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
-    ctx.beginPath();
-    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
-    ctx.fill()
-  }
-}
-
-fillBtn.addEventListener('click', expensiveOperation);
-
-alertBtn.addEventListener('click', () =&gt;
-  alert('You clicked me!')
-);</pre>
-
-<p>
-  אם תלחצו עלהכפתור הראשון ואז ישר לאחר מכן על השני אתם תראו שההודעה למשתמש לא מופיע עד אשר העיגולים לא סיימו להיות מעובדים. הפעולה הראשונה חוסמת את ביצוע הפעולה השנייה עד אשר הפעולה הראשונה תסתיים. </p>
-
-<div class="blockIndicator note">
-<p><strong>לתשומת לב</strong>:
-  זהו אמנם נראה לא טוב, אך זוהי רק דוגמא למה שמפתחים נתקלים בה ביישומים אמיתיים. </p>
-</div>
-
-<p>
-  מדוע זה קורה? התשובה נעוצה בכך ש-JavaScript היא <strong>single threaded</strong>. בנקודה, אנחנו נרצה להציג בפניכם את הרעיון של <strong>threads</strong>.</p>
-
-<h2 id="Threads">Threads</h2>
-
-<p><strong>Thread</strong> הוא בעיקרון תהליך יחיד שתוכנית יכולה להשתמש בה על מנת להשלים משימות. כל תהליך כזה יכול לבצע משימה אחת בכל פעם: </p>
-
-<pre>Task A --&gt; Task B --&gt; Task C</pre>
-
-<p>
-  כל משימה תרוץ באופן טורי, רציף, אך לא סימולטני. משימה צריכה להסתיים כדי שהבאה בתור תחל בריצה. </p>
-
-<p>
-  כפי שאמרנו מקודם, הרבה מחשבים הם בעלי מספר רב של ליבות, כך שהם יכולים לבצע מספר דברים בבת אחת. שפות תכנות שתומכות בליבות מרובות יכולות להתשמש בליבות אלו על מנת לבצע מספר פעולות באופן סימולטני ובמקביל: </p>
-
-<pre>Thread 1: Task A --&gt; Task B
-Thread 2: Task C --&gt; Task D</pre>
-
-<h3 id="JavaScript_-_single_threaded">JavaScript -  single threaded</h3>
-
-<p>JavaScript היא single-threaded.
-  אפילו אם יש מספר ליבות, אנחנו יכולים רק להריץ משימה על thread יחיד, שנקרא <strong>main thread</strong>. הדוגמא שלנו מלמעלה מורצת כך: </p>
-
-<pre>Main thread: Render circles to canvas --&gt; Display alert()</pre>
-
-<p>
-  לאחר זמן מסויים, JavaScript קיבלה מס׳ כלים על מנת להתמודד עם בעיות אלו.
-
-  <a href="/en-US/docs/Web/API/Web_Workers_API">Web workers</a>
-  מאפשר לנו לשלוח חלק מהביצוע של JavaScript ל-thread נפרד שנקרא בשם worker, כך שאנחנו יכולים להריץ קודי JavaScript באופן סימולטני מקביל. בדרך כלל אנחנו נשתמש ב-worker להריץ תהליכי
-
-  allow you to send some of the JavaScript processing off to a separate thread, called a worker, so that you can run multiple JavaScript chunks simultaneously. You'd generally use a worker to run expensive processes off the main thread so that user interaction is not blocked.</p>
-
-<pre>  Main thread: Task A --&gt; Task C
-Worker thread: Expensive task B</pre>
-
-<p>
-  כעת, לאחר שאנחנו יודעים זאת, נסתכל על  <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> או <a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">כדף אינטרנט</a>, ונפתח את הקונסולה.
-  בקובץ זה כתבנו מחדש את הדוגמא שלנו לחישוב 10 מיליון תאריכים בworker thread נפרד. כעת כשאנחנו לוחצים על הכפתור, הדפדן מסוכל להציג את הפסקה לפני שחישוב התאיריכים הסתיימו. הפעולה הראשונה כבר לא חוסמת את הפעולה השנייה.
-
-  </p>
-
-<h2 id="Asynchronous_code_קוד_א-סינכרוני">Asynchronous code קוד א-סינכרוני</h2>
-
-<p>Web workers הם מאוד שימושיים, אבל יש להם הגבלות.
-  אחת מהן היא שהם לא יכולים לגשת ל-{{Glossary("DOM")}} - אנחנו לא יכולים לגרום ל-worker לעשות שום דבר שיכול לעדכן את ממשק המשתמש, את ה-UI. אנחנו לא נוכל לעבד מיליון כדורים כחולים בתוך ה-worker שלנו. הוא בעיקרון יכול רק לעשות מניפולציות מספריות.
-</p>
-
-<p>
-  הבעיה השנייה היא שלמרות שהקוד שרץ בתוך ה-000000 לא חוסם, הוא עדיין בסופו של דבר סינכרוני. זה הופך לבעיה כשאר פונקציה מתבססת על התוצאה של חישובים של תהליכים שקדמו לפונקציה. הסתכלו על התרשים הבא:</p>
-
-<pre>Main thread: Task A --&gt; Task B</pre>
-
-<p>
-  במקרה זה, משימה A עושה משהו כמו הבאת תמונה מהשרת, ואז משימה B עושה משהו עם התמונה הזו, כגון החלת פילטר. אם אנחנו נתחיל את משימה A ואז ישר נריץ את משימה B , אנחנו נקבל שגיאה כי התמנוה עדיין לא זמינה, כי משימה A לא הסתיימה עדיין. </p>
-
-<pre>  Main thread: Task A --&gt; Task B --&gt; |Task D|
-Worker thread: Task C -----------&gt; |      |</pre>
-
-<p>
-  במקרה הזה לדוגמא, יש לנו את משימה D שמבצעת שימוש בתוצאות של משימה B ומשימה C. אם אנחנו יכולים להבטיח שהתוצאות של שתי משימות אלו יהיהו זמינות בואתו הזמן, אז זה יכול להיות תקין, אבל זה בדרך כלל לא קורה. אם משימה D תנסה לרוץ לפני שהערכים שהיא צריכה לקבל זמינים עבורה, זה יחזיר לנו רוב הסיכויים שגיאה.</p>
-
-<p>
-  על מנת לתקן בעיות שכאלו, דפדנים מאפשרים לנו להריץ מס׳ פעולות באופן א-סינכרוני. תכונות כמו <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> מאפשרות לנו לקבוע משימה שתרוץ, כמו לדוגמא הבאת תמונה מהשרת, ולחכות עד אשר התוצאה של אותה משימה תוחזר שנריץ פעולה מסויימת אחרת.</p>
-
-<pre>Main thread: Task A                   Task B
-    Promise:      |__async operation__|</pre>
-
-<p>
-  מאחר שהפעולה מתרחשת במקום אחר, ה-main thread לא חסום בזמן שהפעולה הא-סינכרונית מתרחשת.
-
-</p>
-
-<p>
-  אנחנו נסתכל כיצד אנחנו יכולים לרשום קוד א-סינכרוני במאמר הבא.
-  </p>
-
-<h2 id="לסיכום">לסיכום</h2>
-
-<p>
-    עיצוב תוכנה מודרני סובב יותר ויותר סביב שימוש בתכנות א-סינכרוני, כדי לאפשר לתוכניות לעשות יותר מדבר אחד בכל פעם. כאשר נשתמש ב-API חדשים ובעלי יכולות מתקדמות, אנחנו נמצא יותר מקרים שבהם הדרך היחידה לבצע משהו מסויים היא רק באופן א-סינכרוני. זה היה דיי קשה בעבר לכתוב קוד א-סינכרוני. אמנם עדיין לוקח זמן להתרגל לכך, אבל זה נעשה הרבה יותר קל. ביתר המאמרים במודול זה אנחנו נסביר מדוע קוד א-סינכרוני הוא רלוונטי וחשוב וכיצד נעצב את הקוד על מנת להימנע מחלק מהבעיות שסקרנו במאמר זה.
-
-
-    יותר מדבר אחד בכל פעם. כשאתה משתמש בממשקי API חדשים וחזקים יותר, תמצא מקרים נוספים שבהם הדרך היחידה לעשות דברים היא בצורה אסינכרונית. פעם היה קשה לכתוב קוד אסינכרוני. זה עדיין לוקח להתרגל, אבל זה נעשה הרבה יותר קל. בשאר מודול זה נבדוק יותר מדוע חשוב קוד אסינכרוני וכיצד לתכנן קוד שנמנע מכמה מהבעיות שתוארו לעיל.</p>
-
-<h2 id="במודול_זה">במודול זה</h2>
-
-<ul>
- <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Concepts">עקרונות תכנות א-סינכרוני כלליים</a></li>
- <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Introducing">הצגת asynchronous JavaScript</a></li>
- <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Asynchronous JavaScript: שימוש ב-Intervals ו-Timeouts</a></li>
- <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Promises">טיפול בפעולות א-סינכרוניות באמצעות Promises</a></li>
- <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Async_await">הפיכת Asynchronous Programming לקל יותר עם async ועם await</a></li>
- <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">בחירת האפשרות המתאימה</a></li>
-</ul>
diff --git a/files/he/learn/javascript/asynchronous/index.html b/files/he/learn/javascript/asynchronous/index.html
deleted file mode 100644
index 01ec7babb7..0000000000
--- a/files/he/learn/javascript/asynchronous/index.html
+++ /dev/null
@@ -1,43 +0,0 @@
----
-title: Asynchronous JavaScript
-slug: Learn/JavaScript/Asynchronous
-translation_of: Learn/JavaScript/Asynchronous
----
-<div>{{LearnSidebar}}</div>
-
-<p class="summary"><span class="seoSummary">במודות זה אנחנו נסתכל על {{Glossary("asynchronous")}} {{Glossary("JavaScript")}}, ומדוע זה חשוב, וכיצד אנחנו יכולים להשתמש בזה על מנת לטפל בפעולות חוסמות () כמו הבאת משאבים מהשרת.</span></p>
-
-<h2 id="Prerequisites">Prerequisites</h2>
-
-<p>Asynchronous JavaScript הוא יחסית נושא מתקדם ואנו ממליצים לכם לעבור על המודולים <a href="/he/docs/Learn/JavaScript/First_steps"> צעדים ראשונים ב-JavaScript</a> ועל<a href="/he/docs/Learn/JavaScript/Building_blocks"> אבני הבניין של </a> <a href="/he/docs/Learn/JavaScript/Building_blocks">JavaScript </a>לפני שתתחילו ללמוד מודול זה.</p>
-
-<p>אם אינכם בקיאים בקונספט של תכנות א-סינכרוני, אנא התחילו עם המאמר <a href="/he/docs/Learn/JavaScript/Asynchronous/Concepts">עקרונות תכנות א-סינכרוני</a> במודול זה. אם אתם כן בקיאים, אתם ככל הנראה יכולים להתחיל ב-<a href="/he/docs/Learn/JavaScript/Asynchronous/Introducing">הצגת Asynchronous JavaScript</a>.</p>
-
-<div class="note">
-<p><strong>הערה</strong>: אם אתם עובדים על מחשב\טבלט\מכשיר אחר שאין לכם אפשרות ליצור עליו קבצים אישיים, אתם יכולים לנסות את (רוב) דוגמאות הקוד על תוכנות קוד אינטרנטיות כמו <a href="http://jsbin.com/">JSBin</a> או <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
-</div>
-
-<h2 id="מדריכים">מדריכים</h2>
-
-<dl>
- <dt><a href="/he/docs/Learn/JavaScript/Asynchronous/Concepts">עקרונות תכנות א-סינכרוני כלליים</a> </dt>
- <dd>
- <p>במאמר זה אנחנו נעבור על מספר עקרונות חשובים בנושא תכנות א-סינכרוני וכיצד עקרונות אלו באים לידי ביטוי בדפדפנים וב-JavaScript. אתם אמורים להבין עקרונות אלו בטרם תמשיכו למאמרים נוספים במודול זה.</p>
- </dd>
- <dt><a href="/he/docs/Learn/JavaScript/Asynchronous/Introducing">הצגת Asynchronous JavaScript</a></dt>
- <dd>במאמר זה נסקור בקצרה את הבעיות הקשורות ל-JavaScript סינכרונית, ונסתכל לראשונה על האופציות השונות ב-JavaScript א-סינכרוני שניתקל בהן, ונראה כיצד טכניקות אלו יכולות לפתור לנו בעיות.</dd>
- <dt><a href="/he/docs/Learn/JavaScript/Asynchronous/Loops_and_intervals">Asynchronous JavaScript: שימוש ב-Intervals ו-Timeouts </a></dt>
- <dd>במאמר זה נסתכל על המתודות המסורתיות שקיימות ב-JavaScript להרצת קוד בצורה א-סינכרונית לאחר שזמן מסויים עבר או בקבועי זמן מסויימים ונדון במקרים שהם רלוונטיים לשימוש וכן נדון בסוגיות הטבועות בהם.</dd>
- <dt><a href="/he/docs/Learn/JavaScript/Asynchronous/Promises">טיפול בפעולות א-סינכרוניות באמצעות Promises </a></dt>
- <dd>Promises הם בעיקרון תכונה חדשה יחסית של שפת JavaScript המאפשרת לך לדחות פעולות נוספות עד      לאחר השלמת הפעולה הקודמת, או להגיב לכישלונה. זה מאוד שימושי להגדרת רצף של פעולות שיעבדו בצורה מסויימת. מאמר זה מראה לך כיצד promises עובדות, היכן תראה אותן בשימוש ב- WebAPIs,      ואיך לכתוב promises משלך.</dd>
- <dt><a href="/he/docs/Learn/JavaScript/Asynchronous/Async_await">הפיכת Asynchronous Programming לקל יותר עם async ועם await</a></dt>
- <dd>Promises יכולות להיות קצת מורכבות לביצוע והבנה, ודפדפנים מודרניים הטמיעו את הפונקציות <code>async</code> ואת האופרטור <code>await</code> - הראשון מאפשר לפונקציות סטנדרטיות להתנהג בצורה עקיפה כא-סינכרוניות עם Promises ואילו בשני אנחנו יכולים לעשות שימוש בתוך פונקציות <code>async</code> על מנת לחכות ל-promises לפני שהפונקציה ממשיכה, כך שנוכל לקשור promises בצורה קלה יותר. מאמר זה מסביר את <code>async</code>/<code>await</code>.</dd>
- <dt><a href="/he/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">בחירת האפשרות המתאימה</a></dt>
- <dd>בסיום המודול אנחנו נדון בהבדלים שבין הטכניקות השונות שנגענו בהם, ונדון באיזו טכניקה יהיה מומלץ להשתמש במקרים השונים.</dd>
-</dl>
-
-<h2 id="ראו_גם">ראו גם</h2>
-
-<ul>
- <li><a href="https://eloquentjavascript.net/11_async.html">Asynchronous Programming</a> ב- <a href="https://eloquentjavascript.net/">Eloquent JavaScript</a> ספר אינטרנטי של Marijn Haverbeke.</li>
-</ul>
diff --git a/files/he/learn/javascript/asynchronous/introducing/index.html b/files/he/learn/javascript/asynchronous/introducing/index.html
deleted file mode 100644
index 3f5a342e1e..0000000000
--- a/files/he/learn/javascript/asynchronous/introducing/index.html
+++ /dev/null
@@ -1,281 +0,0 @@
----
-title: הצגת asynchronous JavaScript
-slug: Learn/JavaScript/Asynchronous/Introducing
-translation_of: Learn/JavaScript/Asynchronous/Introducing
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p class="summary">במאמר זה אנחנו נסקור שוב את הבעיות הקשורות ב-Synchronous JavaScript, ונסתכל לראשונה על הטכניקות לא-סינכרוניות שניתקל בהן, וכיצד הן יכולות לסייע לנו לפתור בעיות אלו.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">ידע מוקדם:</th>
-   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals.</td>
-  </tr>
-  <tr>
-   <th scope="row">מטרה:</th>
-   <td>להבין מהי שAsynchronous JavaScript וכיצד היא שונה מ-Synchronous JavaScript, ומתי להשתמש בה.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Synchronous_JavaScript">Synchronous JavaScript</h2>
-
-<p>על מנת שנוכל להבין מה זה <strong>{{Glossary("asynchronous")}}</strong> JavaScript אנחנו צריכים תחילה להבין מה זה <strong>{{Glossary("synchronous")}}</strong> JavaScript. חלק זה של המאמר יסקור שוב חלק מהמידע שכבר עברנו עליו במאמר הקודם.</p>
-
-<p>הרבה מהפונקציונליות שראינו במודולים הקודמים של מדריך זה היו דיי סינכרוניים - אנחנו מריצים קוד מסויים והתוצאה של אותה ריצה מוחזרת כאשר הדפדפן יכול להחזיר את התוצאה. נסתכל כעת על דוגמא פשוטה ב-<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">דף זה</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync.html">או בקוד המקור</a>:</p>
-
-<pre class="brush: js notranslate">const btn = document.querySelector('button');
-btn.addEventListener('click', () =&gt; {
-  alert('You clicked me!');
-
-  let pElem = document.createElement('p');
-  pElem.textContent = 'This is a newly-added paragraph.';
-  document.body.appendChild(pElem);
-});
-</pre>
-
-<p>בקוד זה, השורות מורצות אחת אחרי השנייה:</p>
-
-<ol>
- <li>אנחנו יוצרים הפנייה לאלמנט {{htmlelement("button")}} שכבר זמין ב-DOM.</li>
- <li>אנחנו מוסיפים מטפל אירוע בשם <code><a href="/en-US/docs/Web/API/Element/click_event">click</a></code> כך שכאשר הכפתור נלחץ:
-  <ol>
-   <li>הודעת <code><a href="/en-US/docs/Web/API/Window/alert">()alert</a></code> מוצגת למשתמש.</li>
-   <li>ברגע שהודעה זו נסגרת, אנחנו יוצרים אלמנט {{htmlelement("p")}}.</li>
-   <li>לאחר מכן אנחנו מכניסים לתוך האלמנט  {{htmlelement("p")}} תוכן.</li>
-   <li>בסוף אנחנו משייכים את ה- {{htmlelement("p")}} ל-body.</li>
-  </ol>
- </li>
-</ol>
-
-<p>בעוד שכל תהליך שכזה נמצא בהרצה או עיבוד, שום דבר אחר לא יכול להתרחש - יתר העיבוד מושהה. זה מכיוון שכפי שראינו ב<a href="/he/docs/Learn/JavaScript/Asynchronous/Introducing">מאמר הקודם</a> ש-<a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts#JavaScript_is_single_threaded">JavaScript היא single threaded</a>. רק דבר אחד יכול להתרחש בכל פעם על ה-single main thread, וכל היתר חסום לביצוע או לעיבוד עד אשר אותה פעולה תושלם.</p>
-
-<p>בדוגמא למעלה, אחרי שלחצנו על הכפתור, הפסקה לא הופיעה עד לאחר שכפתור ה-OK לא נלחץ בחלונית הקופצת. אתם יכולים לנסות זאת בעצמכם:</p>
-
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;<span class="pl-ent">button</span>&gt;Click me&lt;/<span class="pl-ent">button</span>&gt;</pre>
-</div>
-
-<p>{{EmbedLiveSample('Synchronous_JavaScript', '100%', '70px')}}</p>
-
-<div class="blockIndicator note">
-<p><strong>לתשומת לב</strong>: חשוב לזכור שאמנם <code><a href="/en-US/docs/Web/API/Window/alert">()alert</a></code> מאוד שימושי לשם הסבר על פעולות סינכרוניות שחוסמות את המשך הפעילות, זוהי פונקציה שאינה בשימוש רב ביישומים אמיתיים מטעמים של חווית משתמש לרוב.</p>
-</div>
-
-<h2 id="Asynchronous_JavaScript">Asynchronous JavaScript</h2>
-
-<p>לאור הסיבות שנסקרו למעלה, הרבה Web API משתמשים בקוד א-סינכרוני על מנת לפעול, במיוחד אלו שניגשים או מביאים משאב מסויים מגורם חיצוני, כמו הבאה של קובץ מהרשת, גישה למאגר מידע והחזרת מידע מתוכו, הפעלת של הזרמת וידאו באמצעות מצלמת רשת וכד׳.</p>
-
-<p>מדוע העבודה עם קוד א-סינכרוני היא מורכבת? נסתכל על דוגמא זריזה. כאשר אנחנו מבקשים תמונה משרת מסויים, איננו יכולים לקבל את התשובה באופן מיידי. זה אומר שהפסאודו-קוד הרשום להלן לא יעבוד:</p>
-
-<pre class="brush: js notranslate">var response = fetch('myImage.png');
-var blob = response.blob();
-// display your image blob in the UI somehow</pre>
-
-<p>זה מכיוון שאנחנו לא יודעים כמה זמן ייקח לתמונה להגיע מהשרת, אז כאשר אנחנו נרצה להריץ את שורת הקוד הבאה, היא תחזיר לנו שגיאה (אולי לסירוגין, אולי בכל פעם) מכיוון שה-<code>response</code> אינו זמין עבורנו עדיין. במקום זאת, אנחנו צריכים שהקוד שלנו יחכה ל-<code>response</code> שיוחזר אלינו לפני שאנחנו מנסים לעשות עם <code>response</code> פעולה כלשהי.</p>
-
-<p>יש שני סוגים עיקריים של קוד א-סינכרוני שאנחנו ניתקל בהם בקוד javascript, יש את ה-callbacks הותיקים ואת ה-promises החדשים יותר.  במאמר זה נסקור את שניהם.</p>
-
-<h2 id="Async_callbacks">Async callbacks</h2>
-
-<p>Async callbacks אלו פונקציות המועברות כפרמטר (ארגומנט) לפונקציה אחרת, כאשר אנחנו קוראים לפונקציה אחרת אשר מריצה קוד ברקע. כאשר הקוד שברקע סיים לרוץ, הוא קורא לאותן פונקציות callbacks על מנת לציין שהפעולה שהייתה ברקע הסתיימה או לציין שמשהו הסתיים.</p>
-
-<p>שימוש ב-callbacks יחסית נחשב מיושן כעת, אבל אנחנו עדיין נראה שימוש רב שלהם ב-APIs ישנים אבל עדיין מאוד שימושיים.</p>
-
-<p>דוגמא ל-async callback אפשר לראות בפרמטר השני של {{domxref("EventTarget.addEventListener", "addEventListener()")}} (כפי שראינו בפעולה למעלה):</p>
-
-<pre class="brush: js notranslate">btn.addEventListener('click', () =&gt; {
-  alert('You clicked me!');
-
-  let pElem = document.createElement('p');
-  pElem.textContent = 'This is a newly-added paragraph.';
-  document.body.appendChild(pElem);
-});</pre>
-
-<p>הפרמטר הראשון הוא הסוג של האירוע שאנחנו רוצים להאזין להתרחשות שלו, והפרמטר השני הוא פונקציית callback שמופעלת ברגע שהאירוע מתרחש.</p>
-
-<p>כאשר אנחנו מעבירים callback function כפרמטר לפונקציה אחרת, אנחנו רק מעבירים את הגדרת הפונקציה כפרמטר, כלומר ה-callback function לא מופעל באופן מיידי. הוא נקרא לאחר מכן (“called back”) באופן א-סינכרוני איפשהו בתוך הגוף של הפונקציה שקיבלה אותו כפרמטר. הפונקציה שקיבלה אותו כפרמטר היא האחראית להפעיל את ה-callback function כשנצטרך.</p>
-
-<p>אנחנו יכולים לכתוב פונקציות משלנו שיכילו callback function באופן דיי פשוט יחסית. נסתכל על דוגמא שמעלה משאב באמצעות <a href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code> API</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html">דף האינטרנט</a>, ו- <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html">קוד המקור</a>):</p>
-
-<pre class="brush: js notranslate">function loadAsset(url, type, callback) {
-  let xhr = new XMLHttpRequest();
-  xhr.open('GET', url);
-  xhr.responseType = type;
-
-  xhr.onload = function() {
-    callback(xhr.response);
-  };
-
-  xhr.send();
-}
-
-function displayImage(blob) {
-  let objectURL = URL.createObjectURL(blob);
-
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-loadAsset('coffee.jpg', 'blob', displayImage);</pre>
-
-<p>כאן יצרנו את פונקציית <code>()displayImage</code> שפשוט מקבלת blob שמועבר אליה ויוצרת לו URL באמצעות URL.createObjectURL(blob). לאחר מכן הפונקציה יוצרת אלמנט HTML מסוג <code>img</code>, משימה לו את הערך של ה-<code>src</code> לאותו URL שנוצר לנו ומשייכת את ה-image ל-body. </p>
-
-<p>בנוסף, יצרנו פונקציה בשם <code>()loadAsset</code> שמקבלת כפרמטרים כתובת URL, סוג הקובץ וכן פונקציית callback (שימו לב שהשם שנתנו לפרמטר - <code>callback</code> - הוא לשם הנוחות בלבד וניתן לקרוא לפרמטר זה בכל שם). פונקציית <code>()displayImage</code> משתמשת ב-<code>XMLHttpRequest</code> (לרוב משתמשים בקיצור שלו - "XHR") על מנת להביא משאב מ-URL מסויים לפני שמעבירים את התגובה של אותה <code>XMLHttpRequest</code> לפונקציית callback שלנו - לפונקציית  <code>()displayImage</code>.</p>
-
-<p>במקרה הזה, פונקציית ה-callback שלנו מחכה ש-XHR יסיים להוריד את המשאב שהוא הביא (באמצעות שימוש במטפל אירוע מסוג <code><a href="/en-US/docs/Web/API/XMLHttpRequestEventTarget/onload">onload</a></code>), וזאת לפני שהיא תקבל את המשאב.</p>
-
-<p>Callbacks הם מאוד ורסטיליים - לא רק שהם מאפשרים לנו לשלוט בסדר שבו פונקציות ירוצו ואיזה מידע יועבר ביניהן, הן גם מאפשרות לנו להעביר מידע לפונקציות שונות בהתאם לנסיבות. כך שאנחנו יכולים להריץ פעולות שונות על המשאב שהתקבל או התגובה שהתקבלה כמו <code>processJSON()</code>, <code>displayText()</code>, וכד׳. </p>
-
-<p>שימו לב שלא כל ה-Callbacks הם א-סינכרוניים וחלקם הם סינכרוניים. כך לדוגמא, כאשר אנחנו משתמשים ב- {{jsxref("Array.prototype.forEach()")}} על מנת לעבור באמצעות לולאה על איברים במערך (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/foreach.html">ראו כדף אינטרנט</a>, וכן <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/foreach.html">את קוד המקור</a>):</p>
-
-<pre class="brush: js notranslate">const gods = ['Apollo', 'Artemis', 'Ares', 'Zeus'];
-
-gods.forEach(function (eachName, index){
-  console.log(index + '. ' + eachName);
-});</pre>
-
-<p>בדוגמא זו, אנחנו עוברים על מערך של Greek gods ומדפיסים את מספרי האינדקס והערכים לקונסולה. הפרמטר שאנחנו נותנים ל-<code>()forEach</code> הוא פונקציית callback, אשר בעצמו מקבל שני פרמטרים, שם הפריט במערך ומספר האינדקס. יחד עם זאת, היא  לא מחכה לשום דבר, היא פשוט רצה באופן אוטומטי. </p>
-
-<h2 id="Promises">Promises</h2>
-
-<p>Promises אלו בעצם הסגנון החדש לקוד א-סינכרוני שאנחנו נראה שמבוצע בהם שימוש ב-Web APIs מודרניים. דוגמא טובה לכך היא <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a></code> API, אשר הוא בעצם כמו גרסה מודרנית ויעילה יותר של {{domxref("XMLHttpRequest")}}. נסתכל על דוגמא מהמאמר שלנו בנושא <a href="/he/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">הבאת מידע מהשרת</a> אשר תגיעו אליו בהמשך:</p>
-
-<pre class="brush: js notranslate">fetch('products.json').then(function(response) {
-  return response.json();
-}).then(function(json) {
-  products = json;
-  initialize();
-}).catch(function(err) {
-  console.log('Fetch problem: ' + err.message);
-});</pre>
-
-<div class="blockIndicator note">
-<p><strong>לתשומת לב</strong>: אתם יכולים למצוא את הגרסה הסופית ב- GitHub (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store-xhr/can-script.js">ראו כאן את קוד המקור</a>, וגם <a href="https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store-xhr/">כדף אינטרנט</a>).</p>
-</div>
-
-<p>כאן אנחנו רואים ש-<code>fetch</code><code>()</code> לוקח פרמטר אחד - את ה-URL של המשאב שנאחנו רוצים להביא מהרשת - והוא מחזיר <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promise</a>. ה-promise היא בעצם אובייקט המייצג השלמה או כישלון של פעולת ה-שaysync. בצורה מסויימת, זו הדרך של הדפדפן להגיד ״אני מבטיח לחזור אליך עם תשובה ברגע שאוכל״. מכאן השם promise.</p>
-
-<p>צריך להתרגל לרעיון הזה על ידי תרגול. זה מרגיש קצת מוזר בהתחלה, כמו החתול של שרדינגר - {{interwiki("wikipedia", "Schrödinger's cat")}}. אף אחת מהאפשרויות לא קרתה עדיין, אז פעולת ההבאה - פעולת ה-fetch, כרגע מחכה לתוצאה של פעולת הדפדפן - להשלמה שלה בעתיד. לאחר מכן שיש לנו שלושה קודי בלוק שמשורשרים לסוף <code>fetch()</code>:</p>
-
-<ul>
- <li>שני בלוקים של <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then()</a></code>. שניהם מכילים callback function שתרוץ אם הפעולה שקדמה לה הצליחה, וכל callback מקבל כקלט, את התוצאה של הפעולה המוצלחת הקודמת, כך שאנחנו יכולים להמשיך ולעשות עם התוצאה משהו. כל <code>.then()</code> מחזיר הבטחה - promise נוספת, כלומר אנחנו יכולים לקשור כמה וכמה בלוקי קוד של <code>.then()</code> אחד לשני, כך שיהיוה הרבה פעולות א-סינכרוניות שירוצו בסדר מסויים, אחת אחרי השנייה.</li>
- <li>בלוק הקוד של <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch">catch()</a></code> בסוף ירוץ אם אחד מהבלוקים של <code>.then()</code> ייכשל - בדרך דומה ל-<code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> הסינכרוני. אובייקט שגיאה - error object - ייהפך לזמין בתוך ה-<code>catch()</code>, והוא יוכל לשמש עבור דיווח על סוג השגיאה שהתרחשה. שימו לב כי promises הסינכרוני לא עובד עם <code>try...catch</code>, למרות שהוא כן יעבוד עם <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">async/await</a>, כפי שנראה בהמשך המאמר.</li>
-</ul>
-
-<div class="blockIndicator note">
-<p><strong>לתשומת לב</strong>: אתם תלמדו עוד הרבה על promises בהמשך המודול הזה, אז אל דאגה אם לא הבנתם אותם עד הסוף. זוהי רק סקירה.</p>
-</div>
-
-<h3 id="The_event_queue">The event queue</h3>
-
-<p>פעולות א-סינכרוניות כמו promises מושמות לתוך ה-<strong>event queue</strong>, אשר רץ לאחר שה-main thread סיים את העיבודים שלו, כך שהם לא יחסמו קוד JavaScript שבא אחריהם. הפעולות שב-promises יושלמו ברגע שיתאפשר, ויחזירו את התוצאה שלהן לסביבת הjavascript. Async operations like promises are put into an <strong>event queue</strong>, which runs after the main thread has finished processing so that they <em>do not block</em> subsequent JavaScript code from running. The queued operations will complete as soon as possible then return their results to the JavaScript environment.</p>
-
-<h3 id="Promises_מול_callbacks">Promises מול callbacks</h3>
-
-<p>ל-Promises יש קצת דמיון ל-callbacks הוותיקים. הם בעיקרון אבוייקט שהוחזר, אליו אנחנו מחברים פונקציות callbacks, ולא צריכים להעביר callbacks לתוך פונקציה.</p>
-
-<p>יחד עם זאת, promises נוצרו במיוחד עבור טיפול בפעולת א-סינכרוניות, ויש להם הרבה יתרונות על ה-callbacks הוותיקים:</p>
-
-<ul>
- <li>ראשית, אנחנו יכולים לקשור מספר פעולות א-סינכרוניות ביחד באמצעות שימוש בכמה <code>.then()</code>, והעברה התוצאה של אחד כקלט של זה שאחריו. זה הרבה יותר קשה לביצוע עם callbacks, מה שבדרך מסתיים עם "pyramid of doom", אשר ידוע גם כ-ה</li>
- <li>Promise callbacks תמיד ייקראו בסדר שבו הם מושמים ב- event queue.</li>
- <li>Error טיפול ב- הוא הרבה יותר קל - כל השגיאות מטופלות על ידי בלוק <code>.catch()</code> אחד בסוף הבדלוק, ולא באמצעות טיפול בכל שלב של ה-פירמידה.</li>
- <li>Avoid inversion control: unlike callbacks will lose full control of how the function will be executed when passing a callback to a third-party library. <a href="https://www.youtube.com/watch?v=bAlczbDUXx8">A great demonstration</a> by Stevie Jay.</li>
-</ul>
-
-<h2 id="ההתנהגות_של_קוד_א-סינכרוני">ההתנהגות של קוד א-סינכרוני</h2>
-
-<p>בואו נעמיק בדוגמא שתסביר לנו יותר לעומק את ההתהנגות של קוד א-סינכרוני, שמראה מה יכול לקראת כשאנחנו לא בקיאים לגמי בסדר של הרצת הקוד וההבעיות שיש בניסיון לטפל בקוד א-סינכרוני כמו בקוד סינכרוני. הודמא הבא היא יחסית דומה למה שראינו בעבר. <a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/async-sync.html">sכדף אינטרנט</a>, וגם <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync.html">קוד המקור</a>). הבדל אחד הוא שכללנו מספר ביטויים של {{domxref("console.log()")}} על ממנת להמחיש את הסדר שאנחנו נחשוב שבו הקוד ירוץ</p>
-
-<pre class="brush: js notranslate">console.log ('Starting');
-let image;
-
-fetch('coffee.jpg').then((response) =&gt; {
-  console.log('It worked :)')
-  return response.blob();
-}).then((myBlob) =&gt; {
-  let objectURL = URL.createObjectURL(myBlob);
-  image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}).catch((error) =&gt; {
-  console.log('There has been a problem with your fetch operation: ' + error.message);
-});
-
-console.log ('All done!');</pre>
-
-<p>הדפדפן יתחיל להריץ את הקוד, הוא יראה את ה-<code>console.log()</code> הראשון ויריץ אותו. ולאחר מכן ייצור את המשתנה <code>image</code> .</p>
-
-<p>הוא לאחר מכן ימשיך לשורה הבאה, ויתחיל להריץ את הבלוק קוד של <code>fetch()</code>, אבל מכיוון ש-<code>fetch()</code> מורץ באופן א-סינכרוני בלי חסימה, הדפדפן ימשיך לקוד שלאחר הקוד של ה-promise-related code, ולכן יגיע ל-<code>console.log()</code> האחרון ( <code>All done!</code>) ואותו יציג לקונסולה. ימשיך לרוץ</p>
-
-<p>רק ברגע שהבלוק של ה-code&gt;fetch() סיים לחלוטין לרוץ והביא תוצאה - result באמצעות הבלוקים של <code>.then()</code>, אנחנו נראה לבסוף את הההודעה שב-<code>console.log()</code> השני (<code>It worked ;)</code>). כך שההודעות הופיעו בסדר שונה ממה שאולי חשבתם:</p>
-
-<ul>
- <li>Starting</li>
- <li>All done!</li>
- <li>It worked :)</li>
-</ul>
-
-<p>אם זה מבלבל אתכם, הסתכלו על הדוגמא הבאה:</p>
-
-<pre class="brush: js notranslate">console.log("registering click handler");
-
-button.addEventListener('click', () =&gt; {
-  console.log("get click");
-});
-
-console.log("all done");</pre>
-
-<p>זה מאוד דומה בהתנהגות - ה-<code>console.log()</code> הראשון והשלישי יציגו את ההודעות שלהן מיד, אבל ה-<code>console.log()</code> השני יהיה חסום להצגה עד אשר מישהו ילחץ על הכפתור. הדוגמא הקודמת פועלת בדרך דוה, למעט כך שבמקרה שההודעה השנייה חסומה בשרשרת ההבטחות המביאות משאב מסויים ומוצגת רק כאשר שרשרת ההבטטחות הושלמה, ולא כאשר המשתמש ילחץ על כפתור. .</p>
-
-<p>בדוגמה של קוד פחות טריוויאלי, קוד מהסוג של הדוגמא הראשונה עלולה לגרום לבעיה - אינכם יכולים לכלול בלוק קוד אסינכרוני המחזיר תוצאה, עליה אתם מסתמכים בהמשך בבלוק קוד סינכרוני. אינכם כולים להבטיח שפונקציית ה-שaysync תחזור לפני שהדפדפן יעבד את חסימת האסינכרון.</p>
-
-<p>על מנת לראות זאת בפעולה, נסו לעשות עותק מקומי של To see this in action, try taking a local copy of <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync.html">הדוגמאו תשלנו</a>, ושנו את ה- <code>console.log()</code> שלישית כך:</p>
-
-<pre class="brush: js notranslate">console.log ('All done! ' + image + 'displayed.');</pre>
-
-<p>אתם אמורים לקבל שגיאה בקונסולה במקום ההודעה השלישית :</p>
-
-<pre class="notranslate"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">TypeError: image is undefined; can't access its "src" property</span></span></span></pre>
-
-<p>זה מכיוון שבזמן שהדפדפן מנסה להריץ את ה-<code>console.log()</code> השלישית, הבלוק קוד של <code>fetch()</code> עדיין לא סיים לרות, כך שהמשתנה <code>image</code> לא ניתן לו ערך עדיין.</p>
-
-<h2 id="למידה_עצמאית_פכו_את_הכל_ל-_async!">למידה עצמאית: פכו את הכל ל- async!</h2>
-
-<p>על מנת לתקן את ה- <code>fetch()</code>, ולהפוך את שלושת -<code>console.log()</code> להיות מופעים בסדר הרצוי, אתם יכולים לעשות את ה-<code>console.log()</code> השלישי שירוץ גם הוא בצורה א-סינכרוני. את זה ניתן לעשות באמצעות העברה שלו לתוך <code>.then()</code> אחר, אשר משורשר לתוך הסוף של ה-<code>.then()</code> השני, או באמצעות פשוט העברה שלו לתוך ה-<code>.then()</code> השני. נסו לתקן זאת.</p>
-
-<div class="blockIndicator note">
-<p><strong>לתשומת לב</strong>: אם נתקעתם, אתם יכולים למצוא את התשובה <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync-fixed.html">כאן</a> או כ <a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/async-sync-fixed.html">דף אינטרנט</a> also). אתם גם יכולים למצוא עוד הרבה על promises במדריך שלנו בנושא <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">טיפול בפעולות א-סינכרוניות באמצעות Promises</a>, בהמשך המודול הזה.</p>
-</div>
-
-<h2 id="לסיכום">לסיכום</h2>
-
-<p>במבנה הבסיסי שלה, JavaScript היא סינכרונית, שפה single-threaded,כך רק פעולה אחת יכולה להיות מעובדת בכל זמן נתון. יחד עם זאת, הדפדפנים הגדירו פונקציות ו-APIs שמאפשרים לנו לרשום פונקציות שלא ירוצו באופן סינכרוני, ובמקום זאת, יופעלו באופן א-סינכרוני כאשר אירוע מסויים מתרחש. זה אומר שאנחנו יכולים לתת לקוד שלנו לעשות דברים אחרים באותו הזמן, מבלי לחסום או לעצור את ה-main thread.</p>
-
-<p>בין אם אנחנו רוצים להירץ קוד באופן סינכרוני או א-סינכרוני, זה תלוי במה שאנחנו מנסים לעשות.</p>
-
-<p>יש פעמים שאנחנו נרצה שדברים יועלו ויתרחשו במיידי. לדוגמא, כאשר המתשמש מגדיר סגנון לאתר ואתם רוצים שהסגנון יוחל באופן מיידי.</p>
-
-<p>אם אנחנו מריצים פעולה מסויימת שלוקח לה זמן, כמו לדוגמא גישה למאגר מידע ושימוש בתוצאות על מנת ליצור תבניות לדגומא, זה יהיה עדיף להעביר את הפעולה הזו מחוץ ל-main thread, כך שתתצבע באופן א-סינכרוני. עם הזמן, אתם תלמדו מתי זה היה הגיוני לבחור בטכניקה א-סינכרונית ולא בסינכורנית.</p>
-
-<ul>
-</ul>
-
-<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}</p>
-
-<h2 id="במודול_זה">במודול זה</h2>
-
-<ul>
- <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Concepts">עקרונות תכנות א-סינכרוני כלליים</a></li>
- <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Introducing">הצגת asynchronous JavaScript</a></li>
- <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Asynchronous JavaScript: שימוש ב-Intervals ו-Timeouts</a></li>
- <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Promises">טיפול בפעולות א-סינכרוניות באמצעות Promises</a></li>
- <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Async_await">הפיכת Asynchronous Programming לקל יותר עם async ועם await</a></li>
- <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">בחירת האפשרות המתאימה</a></li>
-</ul>
diff --git a/files/he/learn/javascript/asynchronous/promises/index.html b/files/he/learn/javascript/asynchronous/promises/index.html
deleted file mode 100644
index 87c8839084..0000000000
--- a/files/he/learn/javascript/asynchronous/promises/index.html
+++ /dev/null
@@ -1,589 +0,0 @@
----
-title: Graceful asynchronous programming with Promises
-slug: Learn/JavaScript/Asynchronous/Promises
-translation_of: Learn/JavaScript/Asynchronous/Promises
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p class="summary"><span class="seoSummary"><strong>Promises</strong> הן תכונה חדשה יחסית ב-JavaScript, אשר מאפשרת לנו לדחות פעולות מסוייומות עד אשר פעולותדמות להן יושלמו, או שיגיבו לכך שהן נכשלו. זוהי תכונה מאוד שימושית על מנת ליצור רצף של פעולות א-סינכרוניות שיעבדו בצור הטובה. מאמר זה נועד להסביר כיצד promises עובדות, כיצד אנו נראה אותם בשימוש ב-web APIs וכיצד נכתוב promises משלנו. </span></p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">ידע מוקדם:</th>
-   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals.</td>
-  </tr>
-  <tr>
-   <th scope="row">מטרה:</th>
-   <td>להבין מהן promises וכיצד להשתמש בהן.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="מהן_promises">מהן promises?</h2>
-
-<p>סקרנו קצת <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> במאמר הראשון במודול זה, אבל במאמר זה נסקור אותן יותר לעומק.?</p>
-
-<p>בעיקרון promise הוא בעצם אובייקט שמייצג מצב ביניים של פעולה - בפועל, promise היא מעין הבטחה שתוצאה מסויימת תוחזר בנקודה מסויימת בעתיד. אין שום הבטחה מתי הפעולה תושלם ומתי התוצאה תוחזר, אבל יש הבטחה שכאשר התוצאה מוכנה, או שכאשר הפעוללה נכשלה, הקוד שסיפקנו ירוץ על מנת לעשות משהו עם תוצאה מוצלחת או להתמודד עם כשלון בפעולה.</p>
-
-<p>באופן כללי, אנחנו פחות מתעניינים בזמן שייקח לפעולה א-סינכרונית להחזיר את התוצאה שלה (אלא אם כן מדובר בזמן יותר מדי ארוך), ואנחנו יותר מעוניינים בכך שתהיה לנו אפשרות להגיב לאותה תגובה כאשר היא תחזור, לא משנה מהי התגובה. וכמובן, זה נחמד שאותה פעולה לא חוסמת את הקוד מלרוץ.</p>
-
-<p>אחד מהשימושים של promise שאנחנו נראה הוא ב-web APIs שמחזירים promise. נניח ויש לנו יישום וידאו צ׳אט. ליישום זה יש חלון עם רשימת החברים של המשתמש, ובלחיצה על כפתור ליד שם החבר, תחל שיחת וידאו עם אותו חבר.</p>
-
-<p>מטפל האירוע של הכפתור הזה קורא ל- {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} על מנת לקבל גישה למיקרופון ולמצלמה של המשתמש. מאחר ו-<code>()getUserMedia</code> חייב לוודא שלמשתמש יש אישור להשתמש באותם מכשירים ולבקש מהמשתמש לבחור איזה מיקרופון ואיזו מצלמה להשתמש בהם או בכל שילוב אחר. בזמן הבקשה הזו, פעולה זו יכולה לחסום את המשך התוכנית לא רק עד אשר כל האישורים האלו התקבלו, אלא גם עד אשר המצלמה והמיקרופון יתחברו. בנוסף, המשתמש אולי לא יגיב באופן מיידי לבקשות אלו. זה יכול לקחת הרבה זמן.</p>
-
-<p>מאחר והקריאה ל- <code>()getUserMedia</code> נעשית מה- browser's main thread, הדפדפן חסום עד אשר <code>()getUserMedia</code> תסיים. ברור כמובן שזו לא אפשרות מקובלת בימים אלו. ללא promises, כל דבר בדפדפן היה נהפך ללא שימושי עד אשר המשתמש יחליט מה לעשות עם המצלמה והמיקרופון. אז במקום לחכות למשתמש, לקבל את המכשירים שנבחרו, ולהחזיר את ה-{{domxref("MediaStream")}} שנוצר למקורות אלו, <code>()getUserMedia</code> מחזיר {{jsxref("promise")}} אשר נפתר עם {{domxref("MediaStream")}} ברגע שהוא זמין.</p>
-
-<p>הקוד של יישום הוידאו צאט שלנו, עשוי להיראות כך?:?</p>
-
-<pre class="brush: js">function handleCallButton(evt) {
-  setStatusMessage("Calling...");
-  navigator.mediaDevices.getUserMedia({video: true, audio: true})
-    .then(chatStream =&gt; {
-      selfViewElem.srcObject = chatStream;
-      chatStream.getTracks().forEach(track =&gt; myPeerConnection.addTrack(track, chatStream));
-      setStatusMessage("Connected");
-    }).catch(err =&gt; {
-      setStatusMessage("Failed to connect");
-    });
-}
-</pre>
-
-<p>הפונקציה הזו מתחילה בכך שהיא משתמש בפונקציה שנקראת <code>()setStatusMessage</code> על מנת לעדכן שורת עדכון למשתמש עם הטקסט: "Calling...", שמעידה על כך שמבוצע ניסיול החל בשיחה. לאחר מכן היא קוראת לפונקציה <code>()getUserMedia</code>, ומבקשת שתחל בסטרים (stream) ?שיש לו גם וידאו וגם אודיו וברגע שהסטרים יהיה מוכן, היא ממשיכה בפעולות לשם הקמת הסטרים וחיבור המצלמה והאודיו. לאחר מכן היא מציגה למשתמש הודעה ״Connected״. </p>
-
-<p>אם <code>()getUserMedia</code> תיכשל, בלוק הקוד של <code>catch</code> ירוץ. הוא משתמש שוב ב- <code>()setStatusMessage</code> על מנת להציג למשתמש שהתרחשה שגיאה. </p>
-
-<p>הדבר החשוב כן הוא שהקריאה של <code>()getUserMedia</code> מוחזרת כמעט באופן מיידי, גם אם הסטרים של המצלמה לא התקבל עדיין. אפילו אם הפונקציה של <code>()handleCallButton</code> סיימה להריץ את הקוד שבתוכה והחזירה את השליטה לקוד שקרא לה, כאשר <code>()getUserMedia</code> תסיים את הפעולה שלה, בין אם בהצלחה ובין אם תתרחש שגיאה, פונקציה זו תקרא שוב לאותו מטפל אירוע שסיפקנו לה. כלומר, היישום ימשיך לעבוד ולא יחכה לזרם הוידאו ולא ימנע מיתר הקוד להמשיך לרוץ. </p>
-
-<div class="blockIndicator note">
-<p><strong>לתשומת לב:</strong>  לפרטים נוספים אודות נושא מורכב זה של וידאו ואודיו, ראו <a href="/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a>.</p>
-</div>
-
-<h2 id="הבעיה_עם_callbacks">הבעיה עם callbacks</h2>
-
-<p>על מנת להבין לעומק מדוע promises הן דבר טוב, יעזור לנו לחשוב על ה-callbacks המיושנות ולהבין מדוע הן בעייתיות. </p>
-
-<p>ננסה להמחיש זאת באמצעות דוגמא להזמנת פיצה כאנלוגיה. יש מספר שלבים שאנחנו צריכים לעשות ולהשלים בהצלחה, אשר לא ממש הגיוני לבצע אותם בסדר אחר או לבצע אותם בסדר הנכון, אבל בלי לחכות שהשלב הקודם הסתיים:</p>
-
-<ol>
- <li>בחירת התוספות לפיצה - זה יכול לקחת זמן אם אנחנו לא ממש בטוחים איזו תוספת אנחנו רוצים על הפיצה ושלב זה יכול להיכשל אם בסופו של דבר לא קיבלנו החלטה איזו תוספת אנחנו רוצים, או אם בסוף החלטנו לאכול משהו אחר. </li>
- <li>בהנחה והחלטנו על תוספת, לאחר מכן אנחנו מבצעים הזמנה של הפיצה שאנחנו רוצים. שלב זה יכול לקחת זמן עד אשר הפיצה תהיה מוכנה, ואף יכול להיכשל אם לפיצרייה אין את המרכיבים הנכונים. </li>
- <li>בשלב האחרון אנחנו אוספים את הפיצה ואוכלים, גם שלב זה יכול להיכשל אם לא שילמנו לדוגמא על הפיצה או לא באנו לאסוף את הפיצה. </li>
-</ol>
-
-<p>עם ה-<a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing#Callbacks">callbacks</a> הישנות, קוד מופשט שלנו ייראה בערך כך: </p>
-
-<pre class="brush: js">chooseToppings(function(toppings) {
-  placeOrder(toppings, function(order) {
-    collectOrder(order, function(pizza) {
-      eatPizza(pizza);
-    }, failureCallback);
-  }, failureCallback);
-}, failureCallback);</pre>
-
-<p>קוד זה הוא מבולגן וקשה להבנה, ולפעמים גם נקרא כ-callback hell, הוא גם דורש שהפונקציה <code>()failureCallback</code> תיקרא כמה פעמים (בעבור כל פונקציה משורשרת) ויש לו גם חסרונות נוספים.</p>
-
-<h3 id="שדרוג_עם_promises">שדרוג עם  promises</h3>
-
-<p>Promises הופכות את סיטואציות כמו למעלה להרבה יותר פשוטות לכתיבה, פירוש וריצה. אם נציג את הקוד המופשט שלנו שוב באמצעות promises א-סינכרוניות, הוא ייראה כך:</p>
-
-<pre class="brush: js">chooseToppings()
-.then(function(toppings) {
-  return placeOrder(toppings);
-})
-.then(function(order) {
-  return collectOrder(order);
-})
-.then(function(pizza) {
-  eatPizza(pizza);
-})
-.catch(failureCallback);</pre>
-
-<p>זה כבר הרבה יותר טוב- הרבה יותר קל להבין מה קורה כאן והיינו צריכים רק בלוק קוד אחד של <code>()</code><code>catch.</code> בעבור כל השגיאות שאולי יתרחשו. כל הקוד הזה אינו חוסם את ה-main thread (כך שאנחנו יכולים להמשיך לראות טלווזיה עד אשר הפיצה תהיה מוכנה), וכל פעולה תחכה בוודאות עד אשר הפעולה הקודמת תסיים לפני שהיא תרוץ. אנחנו יכולים לקשור מספר פעולות א-סינכרוניות כך שיתרחשו אחת אחרי השנייה מכיוון שכל בלוק קוד של <code>(.....)then.</code> מחזיר promise חדשה, שנפתח כאשר הקוד שבתוך ה-<code>(.....)then.</code> הרלוונטי מסיים לרוץ. </p>
-
-<p>באמצעות שימוש בפונקציות חץ (arrow functions), אנחנו אפילו יכולים להפוך את הקוד לעוד יותר פשוט: </p>
-
-
-
-<pre class="brush: js">chooseToppings()
-.then(toppings =&gt;
-  placeOrder(toppings)
-)
-.then(order =&gt;
-  collectOrder(order)
-)
-.then(pizza =&gt;
-  eatPizza(pizza)
-)
-.catch(failureCallback);</pre>
-
-<p>או אפילו בצורה הזו:</p>
-
-<pre class="brush: js">chooseToppings()
-.then(toppings =&gt; placeOrder(toppings))
-.then(order =&gt; collectOrder(order))
-.then(pizza =&gt; eatPizza(pizza))
-.catch(failureCallback);</pre>
-
-<p>זה עובד מכיוון שעם פונקציות חץ, <code>x &lt;= ()</code> הוא סינטקסס חוקי והוא קיצור של <code>{return x} &lt;= ()</code>.</p>
-
-<p>אנחנו אפילו יכולים לרשום את הקוד שלנו בצורה כזו, מאחר שהפונקציות רק מעביר את הארגומנטים שלהם בצורה ישירה, אין צורך באמת לשכבה נוספת של פונקציה:</p>
-
-<pre class="brush: js">chooseToppings().then(placeOrder).then(collectOrder).then(eatPizza).catch(failureCallback);</pre>
-
-<p>יחד עם זאת, סינטקס זה לא ניתן לשימוש שוב, ולא ממש ברור לקריאה. </p>
-
-<div class="blockIndicator note">
-<p><strong>לתשומת לב</strong>: אנחנו אפילו יכולים לעשות שיפורים נוספים בסינטקס באמצעות הסינטקס של <code>async</code>/<code>await</code>, אשר נסקור אותו בהמשך המודול.</p>
-</div>
-
-<p>בבסיס שלהן, promises דומות למאזיני אירוע - event lisenters אך עם הבדלים ביניהם:</p>
-
-<ul>
- <li>promis יכולה להצליח או להיכשל רק פעם אחת. היא לא יכול הלהציח פעמיים או להיכשל פעמיים והיא לא יכולה לעבור ממצב של הצלחה למצב של כישולון או ההפך, ברגע שהפעולה הסתייימה. </li>
- <li>אם promise הצליחה או נכשלה ואלחר מכן אנחנו רוצים להוסיף success/failure callback, ה-callback הנכון הוא שייקרא, למרות שהאירוע עצמו התרחש לפני כן. </li>
-</ul>
-
-<h2 id="הסבר_של_הסינטקט_הבסיסי_של_promise">הסבר של הסינטקט הבסיסי של promise</h2>
-
-<p>Promises חשובות מאוד להבנה מכיוון שמרבית ה-Web API המודרניים משתמשים בהן בעבור פונקציות שעלולות לבצע פעולות ארוכות. </p>
-
-<p>בהמשך המאמר הזה אנחנו נראה כיצד לכתוב promises משלנו, אבל כאן אנחנו נסכתל על דוגמאות פשוטות שאנחנו ניתקל בהן ב-Web API שונים.</p>
-
-<p>בדוגמא הראשונה שלנו, אנחנו נשתמש במתודת <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a></code>, על מנת להביא תמונה מהאינטרנט, במתודת {{domxref("Body.blob", "blob()")}} על מנת להמיר את התוכן הגולמי של התגובה שקיבלנו לאובייקט {{domxref("Blob")}} , ולאחר מכן נציג את אותו blob בתוך אלמנט {{htmlelement("img")}}. זהו מאוד דומה לדוגמא שהסתכלנו עליה ב<a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing#Asynchronous_JavaScript">מאמר הראשון במודול</a>, אבל אנחנו נעשה את זה מעט שונה כך שאתם תבנו את ה-promise. </p>
-
-<ol>
- <li>
-  <p>ראשית, הורידו את ה-<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">HTML template</a> ואת ה-<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/coffee.jpg">image file</a> שאנחנו נייבא. </p>
- </li>
- <li>
-  <p>הוסיפו אלמנט {{htmlelement("script")}} בתחתית ה-{{htmlelement("body")}} בקובץ ה-HTML.</p>
- </li>
- <li>
-  <p>בתוך האלמנט {{HTMLElement("script")}} , הוסיפו את השורה הבאה: </p>
- </li>
- <li>
-  <pre class="brush: js">let promise = fetch('coffee.jpg');</pre>
-
-  <p>שורה זו קוראת למתודת <code>()fetch</code> ומעבירה אליה כפרמטר את ה-URL של התמונה שאנחנו רוצים לייבא מהרשת. אנחנו מאחסנים את אובייקט ה-promise שיוחזר אלינו מ-<code>()fetch</code> בתוך משתנה שנקרא לו promise. כפי שאמרנו בעבר, האובייקט הזה מייצג מצב ביניים שבהתחלה הוא לא הצלחה ולא כישלון - מצב זה נקרא <strong>pending.</strong></p>
- </li>
- <li>על מנת להגיב להצלחה של הפעולה כאשר היא תקרה, במקרה הזה כאשר {{domxref("Response")}} תוחזר אלינו, אנחנו נפעיל את המתודת <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">()</a></code><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then.</a></code> של אובייקט ה-promise. ה-callback בתוך בלוק הקוד של <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">()</a></code><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then.</a></code> (שנקרא גם <strong>executor</strong>), ירוץ רק כאשר פעולת ה-promise תושלם בהצלחה ותחזיר אובייקט {{domxref("Response")}} - במונחי promise, כאשר ה-promise תגיע למצב של הושלמה, <strong>fulfilled</strong>. היא תעביר את האובייקט {{domxref("Response")}} כפרמטר. </li>
- <li>
-  <div class="blockIndicator note">
-  <p><strong>לתשומת לב</strong>: הדרך שבה הבלוק <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">()</a></code><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then.</a></code> עובד היא דומה לדרך שבה אנחנו מוסיפים מאזין אירוע - event listener - לאובייקט באמצעות המתודה <code>()AddEventListener</code>. מאזין האירוע לא ירוץ עד אשר האירוע יתרחש (ובאותה נשימה, כאשר ה-promise הושלמה בהצלחה). ההבדל העיקרי ביניהם הוא ש-<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">()</a></code><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then.</a></code> ירוץ רק פעם אחת בכל פעם שמשתמשים בו ואילו מאזין האירוע יכול להיות מופעל כמה פעמים. </p>
-  </div>
-
-  <p>אנחנו מייד נריץ את מתודת  <code>()blob</code> על התגובה הזו, על מנת לוודא שגוף התגובה הורד בהצלחה, וכאשר הוא זמין נהפוך אותו לאובייקט <code>Blob</code> שאנחנו יכולים לעשות איתו משהו. התוצאה של זה תוחזר לנו כך :</p>
-
-  <pre class="brush: js">response =&gt; response.blob()</pre>
-
-  <p>שזה קיצור של: </p>
-
-  <pre class="brush: js">function(response) {
-  return response.blob();
-}</pre>
-
-  <p>עד כאן עם ההסבר, אנא הוסיפו את הקוד הבא מתחת לשורה הראשונה של JavaScript: </p>
-
-  <pre class="brush: js">let promise2 = promise.then(response =&gt; response.blob());</pre>
- </li>
- <li>
-  <p>כל קריאה ל-<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">()</a></code><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then.</a></code> יוצרת promise חדשה. זהו מאוד שימושי - מכיוון שמתודת -  <code>()blob</code> מחזירה גם היא promise, אנחנו יכולים לטפל באובייקט ה-<code>Blob</code> שהיא מחזירה בעת ההשלמה שלו באמצעות הפעלה של מתודת <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">()</a></code><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then.</a></code> על ה-promise השנייה. מכיוון שאנחנו רוצים לעשות משהו קצת יותר מורכב לאותו blob מאשר רק להריץ מתודה אחת עליו ולהחזיר את התוצאה, אנחנו צריכים לעטוף את גוף הפונקצייה בסוגריים מסולסלות - אחרת זה יגרום לשגיאה. הוסיפו את השורה הבאה מתחת לקוד הנוכחי שלכם: </p>
- </li>
- <li>
-  <pre class="brush: js">let promise3 = promise2.then(myBlob =&gt; {
-
-})</pre>
- </li>
- <li>
-  <p>כעת, נכניס את הקוד הבא שהוא הפונקציה שתופעל, לתוך הסוגריים המסולסלות:</p>
-
-  <pre class="brush: js">let objectURL = URL.createObjectURL(myBlob);
-let image = document.createElement('img');
-image.src = objectURL;
-document.body.appendChild(image);</pre>
-
-  <p>מה שעשינו כאן אנחנו מריצים בעצם מריצים מתודת {{domxref("URL.createObjectURL()")}} , מעבירים אליה כפרמרט את ה-<code>Blob</code> שהוחזר אלינו כאשר ה-promise השנייה הושלמה. זה מחזיר לנו URL שמצביע על האובייקט. לאחר מכן יצרנו אלמנט {{htmlelement("img")}} , וקבענו את ה-<code>src</code> שלו שיהיה שווה ל-URL של האובייקט ושייכנו אותו ל-DOM, כך שהתמונה תוצג על גבי הדף. </p>
- </li>
-</ol>
-
-<p>אם תשמרו ותרעננו את הדף, אתם תראו שהתמונה מוצגת על גבי הדף. </p>
-
-<div class="blockIndicator note">
-<p><strong>לתשומת לב</strong>:  אתם בטח תשימו לב שדוגמאות אלו ארוכות מדי בשביל פעולה פשוטה שיכולנו לבצע באמצעות יצירת אלמנט <code>&lt;img&gt;</code> וקביעת ה-<code>src</code> שלו לאותו URL של התמונה במקום לעשות זאת באמצעות <code>()fetch</code> ובאמצעות <code>()blob</code>. יחד עם זאת, דוגמא זו נועדה על מנת להסביר בפשטות את תהליך ה-promises.</p>
-</div>
-
-<h3 id="תגובה_לכישלון">תגובה לכישלון </h3>
-
-<p>יש משהו חסר בדוגמא שלנו - כרגע, אין משהו שמגדיר כיצד להתמודד עם שגיאה כאשר ה-promise נכשלת, או <strong>rejects</strong> במונחים של promises. אנחנו יכולים להוסיף טיפול בשגיאה באמצעות הרצת מתודת <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch">()catch</a>.</code> של ה-promise הקודמת:</p>
-
-<pre class="brush: js">let errorCase = promise3.catch(e =&gt; {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});</pre>
-
-
-
-<p>To see this in action, try misspelling the URL to the image and reloading the page. The error will be reported in the console of your browser's developer tools.</p>
-
-<p>This doesn't do much more than it would if you just didn't bother including the <code>.catch()</code> block at all, but think about it — this allows us to control error handling exactly how we want. In a real app, your <code>.catch()</code> block could retry fetching the image, or show a default image, or prompt the user to provide a different image URL, or whatever.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: You can see <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch.html">our version of the example live</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch.html">source code</a> also).</p>
-</div>
-
-<h3 id="Chaining_the_blocks_together">Chaining the blocks together</h3>
-
-<p>This is a very longhand way of writing this out; we've deliberately done this to help you understand what is going on clearly. As shown earlier on in the article, you can chain together <code>.then()</code> blocks (and also <code>.catch()</code> blocks). The above code could also be written like this (see also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch-chained.html">simple-fetch-chained.html</a> on GitHub):</p>
-
-<pre class="brush: js">fetch('coffee.jpg')
-.then(response =&gt; response.blob())
-.then(myBlob =&gt; {
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch(e =&gt; {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});</pre>
-
-<p>Bear in mind that the value returned by a fulfilled promise becomes the parameter passed to the next <code>.then()</code> block's executor function.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: <code>.then()</code>/<code>.catch()</code> blocks in promises are basically the async equivalent of a <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> block in sync code. Bear in mind that synchronous <code>try...catch</code> won't work in async code.</p>
-</div>
-
-<h2 id="Promise_terminology_recap">Promise terminology recap</h2>
-
-<p>There was a lot to cover in the above section, so let's go back over it quickly to give you a <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises#Promise_terminology_recap">short guide that you can bookmark</a> and use to refresh your memory in the future. You should also go over the above section again a few more time to make sure these concepts stick.</p>
-
-<ol>
- <li>When a promise is created, it is neither in a success or failure state. It is said to be <strong>pending</strong>.</li>
- <li>When a promise returns, it is said to be <strong>resolved</strong>.
-  <ol>
-   <li>A successfully resolved promise is said to be <strong>fulfilled</strong>. It returns a value, which can be accessed by chaining a <code>.then()</code> block onto the end of the promise chain. The executor function inside the <code>.then()</code> block will contain the promise's return value.</li>
-   <li>An unsuccessful resolved promise is said to be <strong>rejected</strong>. It returns a <strong>reason</strong>, an error message stating why the promise was rejected. This reason can be accessed by chaining a <code>.catch()</code> block onto the end of the promise chain.</li>
-  </ol>
- </li>
-</ol>
-
-<h2 id="Running_code_in_response_to_multiple_promises_fulfilling">Running code in response to multiple promises fulfilling</h2>
-
-<p>The above example showed us some of the real basics of using promises. Now let's look at some more advanced features. For a start, chaining processes to occur one after the other is all fine, but what if you want to run some code only after a whole bunch of promises have <em>all</em> fulfilled?</p>
-
-<p>You can do this with the ingeniously named <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code> static method. This takes an array of promises as an input parameter and returns a new <code>Promise</code> object that will fulfill only if and when <em>all</em> promises in the array fulfill. It looks something like this:</p>
-
-<pre class="brush: js">Promise.all([a, b, c]).then(values =&gt; {
-  ...
-});</pre>
-
-<p>If they all fulfill, then chained <code>.then()</code> block's executor function will be passed an array containing all those results as a parameter. If any of the promises passed to <code>Promise.all()</code> reject, the whole block will reject.</p>
-
-<p>This can be very useful. Imagine that we’re fetching information to dynamically populate a UI feature on our page with content. In many cases, it makes sense to receive all the data and only then show the complete content, rather than displaying partial information.</p>
-
-<p>Let's build another example to show this in action.</p>
-
-<ol>
- <li>
-  <p>Download a fresh copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">page template</a>, and again put a <code>&lt;script&gt;</code> element just before the closing <code>&lt;/body&gt;</code> tag.</p>
- </li>
- <li>
-  <p>Download our source files (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/coffee.jpg">coffee.jpg</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/tea.jpg">tea.jpg</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/description.txt">description.txt</a>), or feel free to substitute your own.</p>
- </li>
- <li>
-  <p>In our script we'll first define a function that returns the promises we want to send to <code>Promise.all()</code>. This would be easy if we just wanted to run the <code>Promise.all()</code> block in response to three <code>fetch()</code> operations completing. We could just do something like:</p>
-
-  <pre class="brush: js">let a = fetch(url1);
-let b = fetch(url2);
-let c = fetch(url3);
-
-Promise.all([a, b, c]).then(values =&gt; {
-  ...
-});</pre>
-
-  <p>When the promise is fulfilled, the <code>values</code> passed into the fullfillment handler would contain three <code>Response</code> objects, one for each of the <code>fetch()</code> operations that have completed.</p>
-
-  <p>However, we don't want to do this. Our code doesn't care when the <code>fetch()</code> operations are done. Instead, what we want is the loaded data. That means we want to run the <code>Promise.all()</code> block when we get back usable blobs representing the images, and a usable text string. We can write a function that does this; add the following inside your <code>&lt;script&gt;</code> element:</p>
-
-  <pre class="brush: js">function fetchAndDecode(url, type) {
-  return fetch(url).then(response =&gt; {
-    if (type === 'blob') {
-      return response.blob();
-    } else if (type === 'text') {
-      return response.text();
-    }
-  })
-  .catch(e =&gt; {
-    console.log('There has been a problem with your fetch operation: ' + e.message);
-  });
-}</pre>
-
-  <p>This looks a bit complex, so let's run through it step by step:</p>
-
-  <ol>
-   <li>First of all we define the function, passing it a URL and a string representing the type of resource it is fetching.</li>
-   <li>Inside the function body, we have a similar structure to what we saw in the first example — we call the <code>fetch()</code> function to fetch the resource at the specified URL, then chain it onto another promise that returns the decoded (or "read") response body. This was always the <code>blob()</code> method in the previous example.</li>
-   <li>However, two things are different here:
-    <ul>
-     <li>First of all, the second promise we return is different depending on what the <code>type</code> value is. Inside the executor function we include a simple <code>if ... else if</code> statement to return a different promise depending on what type of file we need to decode (in this case we've got a choice of <code>blob</code> or <code>text</code>, but it would be easy to extend this to deal with other types as well).</li>
-     <li>Second, we have added the <code>return</code> keyword before the <code>fetch()</code> call. The effect this has is to run the entire chain and then run the final result (i.e. the promise returned by <code>blob()</code> or <code>text()</code>) as the return value of the function we've just defined. In effect, the <code>return</code> statements pass the results back up the chain to the top.</li>
-    </ul>
-   </li>
-   <li>
-    <p>At the end of the block, we chain on a <code>.catch()</code> call, to handle any error cases that may come up with any of the promises passed in the array to <code>.all()</code>. If any of the promises reject, the catch block will let you know which one had a problem. The <code>.all()</code> block (see below) will still fulfill, but just won't display the resources that had problems. If you wanted the <code>.all</code> to reject, you'd have to chain the <code>.catch()</code> block on to the end of there instead.</p>
-   </li>
-  </ol>
-
-  <p>The code inside the function body is async and promise-based, therefore in effect the entire function acts like a promise — convenient.</p>
- </li>
- <li>
-  <p>Next, we call our function three times to begin the process of fetching and decoding the images and text, and store each of the returned promises in a variable. Add the following below your previous code:</p>
-
-  <pre class="brush: js">let coffee = fetchAndDecode('coffee.jpg', 'blob');
-let tea = fetchAndDecode('tea.jpg', 'blob');
-let description = fetchAndDecode('description.txt', 'text');</pre>
- </li>
- <li>
-  <p>Next, we will define a <code>Promise.all()</code> block to run some code only when all three of the promises stored above have successfully fulfilled. To begin with, add a block with an empty executor inside the <code>.then()</code> call, like so:</p>
-
-  <pre class="brush: js">Promise.all([coffee, tea, description]).then(values =&gt; {
-
-});</pre>
-
-  <p>You can see that it takes an array containing the promises as a parameter. The executor will only run when all three promises resolve; when that happens, it will be passed an array containing the results from the individual promises (i.e. the decoded response bodies), kind of like [coffee-results, tea-results, description-results].</p>
- </li>
- <li>
-  <p>Last of all, add the following inside the executor. Here we use some fairly simple sync code to store the results in separate variables (creating object URLs from the blobs), then display the images and text on the page.</p>
-
-  <pre class="brush: js">console.log(values);
-// Store each value returned from the promises in separate variables; create object URLs from the blobs
-let objectURL1 = URL.createObjectURL(values[0]);
-let objectURL2 = URL.createObjectURL(values[1]);
-let descText = values[2];
-
-// Display the images in &lt;img&gt; elements
-let image1 = document.createElement('img');
-let image2 = document.createElement('img');
-image1.src = objectURL1;
-image2.src = objectURL2;
-document.body.appendChild(image1);
-document.body.appendChild(image2);
-
-// Display the text in a paragraph
-let para = document.createElement('p');
-para.textContent = descText;
-document.body.appendChild(para);</pre>
- </li>
- <li>
-  <p>Save and refresh and you should see your UI components all loaded, albeit in a not particularly attractive way!</p>
- </li>
-</ol>
-
-<p>The code we provided here for displaying the items is fairly rudimentary, but works as an explainer for now.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: If you get stuck, you can compare your version of the code to ours, to see what it is meant to look like — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html">see it live</a>, and see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">source code</a>.</p>
-</div>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: If you were improving this code, you might want to loop through a list of items to display, fetching and decoding each one, and then loop through the results inside <code>Promise.all()</code>, running a different function to display each one depending on what the type of code was. This would make it work for any number of items, not just three.</p>
-
-<p>In addition, you could determine what the type of file is being fetched without needing an explicit <code>type</code> property. You could for example check the {{HTTPHeader("Content-Type")}} HTTP header of the response in each case using <code><a href="/en-US/docs/Web/API/Headers/get">response.headers.get("content-type")</a></code>, and then react accordingly.</p>
-</div>
-
-<h2 id="Running_some_final_code_after_a_promise_fulfillsrejects">Running some final code after a promise fulfills/rejects</h2>
-
-<p>There will be cases where you want to run a final block of code after a promise completes, regardless of whether it fulfilled or rejected. Previously you'd have to include the same code in both the <code>.then()</code> and <code>.catch()</code> callbacks, for example:</p>
-
-<pre class="brush: js">myPromise
-.then(response =&gt; {
-  doSomething(response);
-  runFinalCode();
-})
-.catch(e =&gt; {
-  returnError(e);
-  runFinalCode();
-});</pre>
-
-<p>In more recent modern browsers, the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code> method is available, which can be chained onto the end of your regular promise chain allowing you to cut down on code repetition and do things more elegantly. The above code can now be written as follows:</p>
-
-<pre class="brush: js">myPromise
-.then(response =&gt; {
-  doSomething(response);
-})
-.catch(e =&gt; {
-  returnError(e);
-})
-.finally(() =&gt; {
-  runFinalCode();
-});</pre>
-
-<p>For a real example, take a look at our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-finally.html">promise-finally.html demo</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-finally.html">source code</a> also). This works exactly the same as the <code>Promise.all()</code> demo we looked at in the above section, except that in the <code>fetchAndDecode()</code> function we chain a <code>finally()</code> call on to the end of the chain:</p>
-
-<pre class="brush: js">function fetchAndDecode(url, type) {
-  return fetch(url).then(response =&gt; {
-    if(type === 'blob') {
-      return response.blob();
-    } else if(type === 'text') {
-      return response.text();
-    }
-  })
-  .catch(e =&gt; {
-    console.log(`There has been a problem with your fetch operation for resource "${url}": ` + e.message);
-  })
-  .finally(() =&gt; {
-    console.log(`fetch attempt for "${url}" finished.`);
-  });
-}</pre>
-
-<p>This logs a simple message to the console to tell us when each fetch attempt has finished.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: <code>finally()</code> allows you to write async equivalents to try/catch/finally in async code.</p>
-</div>
-
-<h2 id="Building_your_own_custom_promises">Building your own custom promises</h2>
-
-<p>The good news is that, in a way, you've already built your own promises. When you've chained multiple promises together with <code>.then()</code> blocks, or otherwise combined them to create custom functionality, you are already making your own custom async promise-based functions. Take our <code>fetchAndDecode()</code> function from the previous examples, for example.</p>
-
-<p>Combining different promise-based APIs together to create custom functionality is by far the most common way you'll do custom things with promises, and shows the flexibility and power of basing most modern APIs around the same principle. There is another way, however.</p>
-
-<h3 id="Using_the_Promise()_constructor">Using the Promise() constructor</h3>
-
-<p>It is possible to build your own promises using the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise()</a></code> constructor. The main situation in which you'll want to do this is when you've got code based on an an old-school asynchronous API that is not promise-based, which you want to promis-ify. This comes in handy when you need to use existing, older project code, libraries, or frameworks along with modern promise-based code.</p>
-
-<p>Let's have a look at a simple example to get you started — here we wrap a <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> call with a promise — this runs a function after two seconds that resolves the promise (using the passed <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve">resolve()</a></code> call) with a string of "Success!".</p>
-
-<pre class="brush: js">let timeoutPromise = new Promise((resolve, reject) =&gt; {
-  setTimeout(function(){
-    resolve('Success!');
-  }, 2000);
-});</pre>
-
-<p><code>resolve()</code> and <code>reject()</code> are functions that you call to fulfill or reject the newly-created promise. In this case, the promise fulfills with a string of "Success!".</p>
-
-<p>So when you call this promise, you can chain a <code>.then()</code> block onto the end of it and it will be passed a string of "Success!". In the below code we simply alert that message:</p>
-
-<pre class="brush: js">timeoutPromise
-.then((message) =&gt; {
-   alert(message);
-})</pre>
-
-<p>or even just</p>
-
-<pre class="brush: js">timeoutPromise.then(alert);
-</pre>
-
-<p>Try <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/custom-promise.html">running this live</a> to see the result (also see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/custom-promise.html">source code</a>).</p>
-
-<p>The above example is not very flexible — the promise can only ever fulfill with a single string, and it doesn't have any kind of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject">reject()</a></code> condition specified (admittedly, <code>setTimeout()</code> doesn't really have a fail condition, so it doesn't matter for this simple example).</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: Why <code>resolve()</code>, and not <code>fulfill()</code>? The answer we'll give you for now is <em>it's complicated</em>.</p>
-</div>
-
-<h3 id="Rejecting_a_custom_promise">Rejecting a custom promise</h3>
-
-<p>We can create a promise that rejects using the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject">reject()</a></code> method — just like <code>resolve()</code>, this takes a single value, but in this case it is the reason to reject with, i.e., the error that will be passed into the <code>.catch()</code> block.</p>
-
-<p>Let's extend the previous example to have some <code>reject()</code> conditions as well as allowing different messages to be passed upon success.</p>
-
-<p>Take a copy of the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/custom-promise.html">previous example</a>, and replace the existing <code>timeoutPromise()</code> definition with this:</p>
-
-<pre class="brush: js">function timeoutPromise(message, interval) {
-  return new Promise((resolve, reject) =&gt; {
-    if (message === '' || typeof message !== 'string') {
-      reject('Message is empty or not a string');
-    } else if (interval &lt; 0 || typeof interval !== 'number') {
-      reject('Interval is negative or not a number');
-    } else {
-      setTimeout(function(){
-        resolve(message);
-      }, interval);
-    }
-  });
-};</pre>
-
-<p>Here we are passing two arguments into a custom function — a message to do something with, and the time interval to pass before doing the thing. Inside the function we then return a new <code>Promise</code> object — invoking the function will return the promise we want to use.</p>
-
-<p>Inside the Promise constructor, we do a number of checks inside <code>if ... else</code> structures:</p>
-
-<ol>
- <li>First of all we check to see if the message is appropriate for being alerted. If it is an empty string or not a string at all, we reject the promise with a suitable error message.</li>
- <li>Next, we check to see if the interval is an appropriate interval value. If it is negative or not a number, we reject the promise with a suitable error message.</li>
- <li>Finally, if the parameters both look OK, we resolve the promise with the specified message after the specified interval has passed using <code>setTimeout()</code>.</li>
-</ol>
-
-<p>Since the <code>timeoutPromise()</code> function returns a <code>Promise</code>, we can chain <code>.then()</code>, <code>.catch()</code>, etc. onto it to make use of its functionality. Let's use it now — replace the previous <code>timeoutPromise</code> usage with this one:</p>
-
-<pre class="brush: js">timeoutPromise('Hello there!', 1000)
-.then(message =&gt; {
-   alert(message);
-})
-.catch(e =&gt; {
-  console.log('Error: ' + e);
-});</pre>
-
-<p>When you save and run the code as is, after one second you'll get the message alerted. Now try setting the message to an empty string or the interval to a negative number, for example, and you'll be able to see the promise reject with the appropriate error messages! You could also try doing something else with the resolved message rather than just alerting it.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: You can find our version of this example on GitHub as <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/custom-promise2.html">custom-promise2.html</a> (see also the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/custom-promise2.html">source code</a>).</p>
-</div>
-
-<h3 id="A_more_real-world_example">A more real-world example</h3>
-
-<p>The above example was kept deliberately simple to make the concepts easy to understand, but it is not really very async. The asynchronous nature is basically faked using <code>setTimeout()</code>, although it does still show that promises are useful for creating a custom function with sensible flow of operations, good error handling, etc.</p>
-
-<p>One example we'd like to invite you to study, which does show a useful async application of the <code>Promise()</code> constructor, is <a href="https://github.com/jakearchibald/idb/">Jake Archibald's idb library</a>. This takes the <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB API</a>, which is an old-style callback-based API for storing and retrieving data on the client-side, and allows you to use it with promises. If you look at the <a href="https://github.com/jakearchibald/idb/blob/master/lib/idb.js">main library file</a> you'll see the same kind of techniques we discussed above being used there. The following block converts the basic request model used by many IndexedDB methods to use promises:</p>
-
-<pre class="brush: js">function promisifyRequest(request) {
-  return new Promise(function(resolve, reject) {
-    request.onsuccess = function() {
-      resolve(request.result);
-    };
-
-    request.onerror = function() {
-      reject(request.error);
-    };
-  });
-}</pre>
-
-<p>This works by adding a couple of event handlers that fulfill and reject the promise at appropriate times:</p>
-
-<ul>
- <li>When the <code><a href="/en-US/docs/Web/API/IDBRequest">request</a></code>'s <a href="/en-US/docs/Web/API/IDBRequest/success_event"><code>success</code> event</a> fires, the <code><a href="/en-US/docs/Web/API/IDBRequest/onsuccess">onsuccess</a></code> handler fulfills the promise with the request <code><a href="/en-US/docs/Web/API/IDBRequest/result">result</a></code>.</li>
- <li>When the <code><a href="/en-US/docs/Web/API/IDBRequest">request</a></code>'s <a href="/en-US/docs/Web/API/IDBRequest/error_event"><code>error</code> event</a> fires, the <code><a href="/en-US/docs/Web/API/IDBRequest/onerror">onerror</a></code> handler rejects the promise with the request <code><a href="/en-US/docs/Web/API/IDBRequest/error">error</a></code>.</li>
-</ul>
-
-<h2 id="Conclusion">Conclusion</h2>
-
-<p>Promises are a good way to build asynchronous applications when we don’t know the return value of a function or how long it will take to return. They make it easier to express and reason about sequences of asynchronous operations without deeply nested callbacks, and they support a style of error handling that is similar to the synchronous <code>try...catch</code> statement.</p>
-
-<p>Promises work in the latest versions of all modern browsers; the only place where promise support will be a problem is in Opera Mini and IE11 and earlier versions.</p>
-
-<p>We didn't touch on all promise features in this article, just the most interesting and useful ones. As you start to learn more about promises, you'll come across further features and techniques.</p>
-
-<p>Most modern Web APIs are promise-based, so you'll need to understand promises to get the most out of them. Among those APIs are <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a>, <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>, <a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams</a>, and many more. Promises will be more and more important as time goes on, so learning to use and understand them is an important step in learning modern JavaScript.</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise()</a></code></li>
- <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Using promises</a></li>
- <li><a href="https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">We have a problem with promises</a> by Nolan Lawson</li>
-</ul>
-
-<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</p>
-
-<h2 id="במודול_זה">במודול זה</h2>
-
-<ul>
- <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Concepts">עקרונות תכנות א-סינכרוני כלליים</a></li>
- <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Introducing">הצגת asynchronous JavaScript</a></li>
- <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Asynchronous JavaScript: שימוש ב-Intervals ו-Timeouts</a></li>
- <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Promises">טיפול בפעולות א-סינכרוניות באמצעות Promises</a></li>
- <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Async_await">הפיכת Asynchronous Programming לקל יותר עם async ועם await</a></li>
- <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">בחירת האפשרות המתאימה</a></li>
-</ul>
diff --git a/files/he/learn/javascript/asynchronous/timeouts_and_intervals/index.html b/files/he/learn/javascript/asynchronous/timeouts_and_intervals/index.html
deleted file mode 100644
index 2d97d2827d..0000000000
--- a/files/he/learn/javascript/asynchronous/timeouts_and_intervals/index.html
+++ /dev/null
@@ -1,651 +0,0 @@
----
-title: 'Cooperative asynchronous JavaScript: Timeouts and intervals'
-slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
-translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p class="summary">
-  במאמר זה אנחנו נסתכל על מתודות מסורתיות שיש ב-JavaScript, בעבור הרצה של קוד באופן א-סינכרוני לאחר שזמן מסויים עבר או באינטרוול מסויים (כלומר לקבוע מספר פעמים שירוץ בכל פרק זמן מסויים), נדון בשימושים שלהם ומה הסוגיות הטבועות בהם.
-
-  </p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">ידע מוקדם:</th>
-   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals.</td>
-  </tr>
-  <tr>
-   <th scope="row">מטרה:</th>
-   <td>
-    הבנה של לולאות א-סינכרוניות ואינטרוולים ולמה הם משמים. </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="הקדמה">הקדמה</h2>
-
-<p>
-  במשך זמן רב, פלטפורמת ה-web  העניקה למפתחי JavaScript מספר של פונקציות שאפשרו לה להריץ קוד באופן א-סינכרוני, כך שהקוד ירוץ לאחר זמן מסויים שעבר או להריץ קוד מסויים באופן א-סינכרוני,ע ם הפרש זמן מסויים בין כל ריצה שלו, עד שאנחנו נגיד לו לעצור. אלו הם :</p>
-
-<dl>
- <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code></dt>
- <dd>
-  מריץ בלוק קוד מסויים פעם אחת לאחר שזמן מסויים עבר. </dd>
- <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code></dt>
- <dd>
-  מריץ בלוק קוד מסויים באופן חוזר, עם הפרש של זמן מסויים בין כל ריצה. </dd>
- <dt><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code></dt>
- <dd>
-   זוהי גרסה מודרנית ל-<code>setInterval()</code>. היא מריצה בלוק קוד מסויים לפני שהדפדפן צובע מחדש את התצוגה, כך שמתאפשרת לאניממציה לרוץ  במסגרת מתאימה ללא קשר לסביבה בה היא פועלת.
-  </dd>
-</dl>
-
-<p>
-  הקוד הא-סינכרוני שנכתב באמצעות פונקציות אלו בעצם ירוץ על ה-00000, אבל כן התאפשר לנו להריץ קוד אחר בין כל ריצה שלהם במידה מסוייתמ, תלוי כמה הפונקציות שנכתוב יעשו שימוש רב במעבד. בכל מקרה, הפונקציות הללו משמשות אנימציות קבועות ועוד תהליכי רקע על אתר אינטרנט או יישום אינטרנטר. בחלקים הבאים של המאמר אנחנו נגע בכל אחת מהן ולמה הן משמשות. .</p>
-
-<h2 id="setTimeout()">setTimeout()</h2>
-
-<p>
-  כפי שאמרנו למעלה,  <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> מריצה בלוק קוד מסויים פעם אחת, לאחר שזמן מסויים שהגדרנו לה חלף. היא מקבלת את הפרמטרים הבאים: </p>
-
-<ul>
- <li>פונקציה שתרוץ או הפנייה לפונקציה שהוגדרה במקום אחר.
-
- </li>
- <li>
-
-  מספר שמייצג את משך הזמן (אינטרוול הזמן) במילשניות (כך 1000 מילישניות שווה לשנייה אחת). המספר הזה מייצג את משך הזמן שיעבור לפני שהקוד יורץ - הפונקציה תורץ. אנחנו יכולים לרשום את הערך של 0 או להשמיט את המספר הזה לחלוטין ואז הפונקציה תרוץ באופן מיידע. עוד על מדוע נרצה לעשות זאת אנחנו נראה בהמשך. </li>
- <li>
-  פרמטרים נוספים, ככל ונדרשים על ידי הפונקציה שנתנו כפרמטר ל--<code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code>. כלומר, פרמטרים שנרצה להעביר לפונקציה שתרוץ.
-</li>
-</ul>
-
-<div class="blockIndicator note">
-<p><strong>לתשומת לב:</strong>
-  מכיוון ש-0000000 מורצות ביחד, אין כל הבטחה שהן יופעלו  <em>במדוייק</em> לאחר הזמן שהגדרנו. במקום, הם ייקראו לאחר שהזמן שהגדרנו חלף, <em>לפחות</em>.
-
-  Because timeout callbacks are executed cooperatively, there's no guarantee that they will be called after <em>exactly</em> the specified amount of time. Instead, they will be called after <em>at least</em> that much time has elapsed.
-
-
-  Timeout handlers לא יכולים לרוץ עד אשר ה-main thread מגיע לנקודה בריצה שלו שם הוא עובר על מטפלים אלו למצוא את אלו שהוא צריך להריץ אותם.  שה-00000
-</p>
-</div>
-
-<p>
-  בדוגמא הבאה, הדפדפן יחכה שתי שניות לפני שיריץ את הפונקציה האנונימית, ואז יציג את הודעת ה-alert.
-e (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">ראו כדף אינטרנט</a>, וכן <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">את קוד המקור</a>):</p>
-
-<pre class="brush: js">let myGreeting = setTimeout(function() {
-  alert('Hello, Mr. Universe!');
-}, 2000)</pre>
-
-<p>
-  הפונקציות שאנחנו מציינים לא חייבות להיות אנונימיות. אנחנו יכולים לתת לפונקציה שלנו שם ואפילו להגדיר אותה במקום אחר, ואז להעביר הפנייה לפונקציה בתוך ה- <code>setTimeout()</code> . הגרסאות הבאות של הקוד שלנו הם שוות לראשונה:
-
-  he functions we specify don't have to be anonymous. We can give our function a name, and can even define it somewhere else and pass a function reference to the <code>setTimeout()</code>. The following two versions of our code snippet are equivalent to the first one:</p>
-
-<pre class="brush: js">// With a named function
-let myGreeting = setTimeout(function sayHi() {
-  alert('Hello, Mr. Universe!');
-}, 2000)
-
-// With a function defined separately
-function sayHi() {
-  alert('Hello Mr. Universe!');
-}
-
-let myGreeting = setTimeout(sayHi, 2000);</pre>
-
-<p>
-  זה יכול להיות שימושי כאשר יש לנו פונקציה שצריכה להיקרא/להיות מופעלת גם מתוך -timeout וגם בתגובה לאירוע, לדוגמא. אבל, זה גם יכול לעזור לנו להשאיר את הקוד שלנו מסודר, במיוחד אם אחרי ה-timeout callback יש לנו יותר מכמה שורות קוד.
-</p>
-
-<p><code>setTimeout()</code>
-  מחזירה ערך מזהה שיכול לשמש לשם הפנייה לאותו timeout לאחר מכן, אם נרצה לדוגמא לעצור את ה-timeout. ראו  {{anch("Clearing timeouts")}}  בהמשך על מנת ללמוד כיצד לעשות זאת.
-
-
-  </p>
-
-<h3 id="העברת_פרמטרים_לפונקציית_setTimeout()">העברת פרמטרים לפונקציית setTimeout() </h3>
-
-<p>
-  כל פרמטר שנרצה להעביר לפונקציה שתרוף בתוך ה-<code>setTimeout()</code>, יהיו חייבים להיות מועברים כפרמטרים נוספוים לפונקציית ה-<code>setTimeout()</code>, וזאת בסוף הרשימת פרמטרים. לדוגמא, אנחנו יכולים כתוב מחדש את הפונקציה הקודמת שלנו כך שהיא תגיד hi לכל שם שיועבר אליה
-:</p>
-
-<pre class="brush: js">function sayHi(who) {
-  alert('Hello ' + who + '!');
-}</pre>
-
-<p>
-  השם של ה-person יכול להיות מועבר כפרמטר שלישי לתוך ה-<code>setTimeout()</code>
-
-:</p>
-
-<pre class="brush: js">let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');</pre>
-
-<h3 id="מחיקת_Timeouts">מחיקת Timeouts</h3>
-
-<p>
-  לבסוף, אם timeout נוצר, אנחנו יכולים לבטל אותו לפני שהזמן שהגדרנו לו הסתיים באמצעשות שימוש ב-<code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout">clearTimeout()</a></code> והעברה של אותו ערך מזהה של ה-<code>setTimeout()</code> כפרמטר. כך, על מנת לבטל את ה-<code>setTimeout()</code> בדוגמא למעלה, אנחנו צריכים לרשום משהו כזה:
-</p>
-
-<pre class="brush: js">clearTimeout(myGreeting);</pre>
-
-<div class="blockIndicator note">
-<p><strong>לתשומת לב</strong>: ראו <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html">greeter-app.html</a>
-  לדוגמא יותר מעניינת אשר מאפשרת לכן לקבוע את השם של האדם שנגיד לו שלום בטופס, ואז לבטל את הברכה באמצעו תכפתור אחג. (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/greeter-app.html">קוד המקור</a>).</p>
-</div>
-
-<h2 id="setInterval()">setInterval()</h2>
-
-<p><code>setTimeout()</code> עובדת מצוים כאשר אנחנו צריכים להריץ בלוק קוד מסויים פעם אחת לאחר  אינטרוול זמן שעבר. אבל מה קורה כאשר אנחנו רוצים להריץ קוד מסויים שוב ושוב, כמו במקרה של אנימציות?</p>
-
-<p>כאן נכנס לתמונה <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code> .
-  פונקציה זו עובדת בצורה דומה ל-<code>setTimeout()</code>, למעט העובדה שהפונקציה שאנחנו מעבירים כפרמטר ראשון, תרוץ באופן חוזר ונשנה לכל הפחות בכל משך הזמן שהוגדר לה (גם כן במילישניות), ולא רק פעם אחת. אנחנו גם יכולים להעביר לה את הפרמטרים הדרושים לפונקציה שתרוץ.
-.</p>
-
-<p>
-  נראה דוגמא על מנת להמחיש את העניין. הפונקציה הבא יוצרת אובייקט <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date()</a></code> חדש, מחלצת חרוזת זמן מתוכו באמצעות שימוש ב- <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString">toLocaleTimeString()</a></code> ציגה את זה לממשק המתשמש. לאחר מכן אנחנו מריצים פונקציה אחת לשנייה באמצעות שימוש ב-<code>setInterval()</code>
-  על מנת ליצור את האפשר של שעון דיגיטלי שמעדכן את עצמו כל שנייה.
-  (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">ראו כדף אינטרנט</a>, ואת also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">קוד המקור</a>):</p>
-
-<pre class="brush: js">function displayTime() {
-   let date = new Date();
-   let time = date.toLocaleTimeString();
-   document.getElementById('demo').textContent = time;
-}
-
-const createClock = setInterval(displayTime, 1000);</pre>
-
-<p>בדיוק כמו <code>setTimeout()</code>, <code>setInterval()</code> מחזירה ערך מזהה כך שאנחנו יכולים להשתמש בו בהמשך על מנת למחוק את ה-interval.</p>
-
-<h3 id="מחיקת_intervals">מחיקת intervals</h3>
-
-<p><code>setInterval()</code> תמשיך לרוץ באופן מתמשך וקבוע, אלא אם אנחנו נעשה איתה משהו -
-  אנחנו נרצה אולי דרך לעצור משימות כאלו, אחרת אנחנו נקבל שגיאות השהדפדפן לא מצליח להשלים גרסאות נוספות של המשימה הזו, או שהאניממציה שמטופלת על ידי המשימה הזו הסתיימה. אנחנו יכולים לעשות זאת באותה דרך שבה אנחנו מסיימים <code>setInterval()</code> - באמצעות העבר הערך המזהה שהוחזר לנו בהפעלה של <code>setInterval()</code> לפונקציה  <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval">clearInterval()</a></code>:
-
-  </p>
-
-<pre class="brush: js">const myInterval = setInterval(myFunction, 2000);
-
-clearInterval(myInterval);</pre>
-
-<h4 id="למידה_עצמאית_יצירה_של_שעון_עצר">למידה עצמאית: יצירה של שעון עצר</h4>
-
-<p>לאחר שעברנו על פונקציות אלו, נסו לאתגר את עצמכם במשימה זו. עשו עותקשל הדוגמא שלנו שנמצא ב- <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">setInterval-clock.html</a> ושנו אותה כך שתהיה שעון סטופר.</p>
-
-<p>
-  אתם צריכים להציג את הזמן כמו בדוגמא הקודמת, רק שבתרגיל זה אתם תצטרכו:</p>
-
-<ul>
- <li>כפתור "Start" על מנת שהשעון יתחיל לרוץ.</li>
- <li>כפתור "Stop" להשהות את השעון.</li>
- <li>כפתור "Reset" לאפס את השעון ל- 0.</li>
- <li>תצוגת זמן על מנת להציג כמה שניות עברו ולא מה השעה הנוכחית </li>
-</ul>
-
-<p>רמזים:</p>
-
-<ul>
- <li>You can structure and style the button markup however you like; just make sure you use semantic HTML, with hooks to allow you to grab the button references using JavaScript.</li>
- <li>You probably want to create a variable that starts at 0, then increments by one every second using a constant loop.</li>
- <li>It is easier to create this example without using a <code>Date()</code> object, like we've done in our version, but less accurate — you can't guarantee that the callback will fire after exactly 1000ms. A more accurate way would be to run <code>startTime = Date.now()</code> to get a timestamp of exactly when the user clicked the start button, and then do <code>Date.now() - startTime</code> to get the number of milliseconds after the start button was clicked.</li>
- <li>You also want to calculate the number of hours, minutes, and seconds as separate values, and then show them together in a string after each loop iteration. From the second counter, you can work out each of these.</li>
- <li>How would you calculate them? Have a think about it:
-  <ul>
-   <li>The number of seconds in an hour is 3600.</li>
-   <li>The number of minutes will be the amount of seconds left over when all of the hours have been removed, divided by 60.</li>
-   <li>The number of seconds will be the amount of seconds left over when all of the minutes have been removed.</li>
-  </ul>
- </li>
- <li>You'll want to include a leading zero on your display values if the amount is less than 10, so it looks more like a traditional clock/watch.</li>
- <li>To pause the stopwatch, you'll want to clear the interval. To reset it, you'll want to set the counter back to 0 and then immediately update the display.</li>
- <li>You probably ought to disable the start button after pressing it once, and enable it again after you've stopped it. Otherwise multiple presses of the start button will apply multiple <code>setInterval()</code>s to the clock, leading to wrong behavior.</li>
-</ul>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: If you get stuck, you can <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">find our version here</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">source code</a> also).</p>
-</div>
-
-<h2 id="Things_to_keep_in_mind_about_setTimeout()_and_setInterval()">Things to keep in mind about setTimeout() and setInterval()</h2>
-
-<p>There are a few things to keep in mind when working with <code>setTimeout()</code> and <code>setInterval()</code>. Let's review these now.</p>
-
-<h3 id="Recursive_timeouts">Recursive timeouts</h3>
-
-<p>There is another way we can use <code>setTimeout()</code>: We can call it recursively to run the same code repeatedly, instead of using <code>setInterval()</code>.</p>
-
-<p>The below example uses a recursive <code>setTimeout()</code> to run the passed function every 100 milliseconds:</p>
-
-<pre class="brush: js">let i = 1;
-
-setTimeout(function run() {
-  console.log(i);
-  i++;
-  setTimeout(run, 100);
-}, 100);</pre>
-
-<p>Compare the above example to the following one — this uses <code>setInterval()</code> to accomplish the same effect:</p>
-
-<pre class="brush: js">let i = 1;
-
-setInterval(function run() {
-  console.log(i);
-  i++
-}, 100);</pre>
-
-<h4 id="How_do_recursive_setTimeout()_and_setInterval()_differ">How do recursive <code>setTimeout()</code> and <code>setInterval()</code> differ?</h4>
-
-<p>The difference between the two versions of the above code is a subtle one.</p>
-
-<ul>
- <li>Recursive <code>setTimeout()</code> guarantees the same delay between the executions, so for example 100ms in the above case. The code will run and then wait 100 milliseconds before it runs again, so the interval will be the same regardless of how long the code takes to run.</li>
- <li>The example using <code>setInterval()</code> does things somewhat differently. The interval we choose <em>includes</em> the time taken to execute the code we want to run in. Let's say that the code takes 40 milliseconds to run — the interval then ends up being only 60 milliseconds.</li>
- <li>When using <code>setTimeout()</code> recursively, each iteration can calculate a different delay before running the next iteration. In other words, the value of the second parameter can specify a different time in milliseconds to wait before running the code again.</li>
-</ul>
-
-<p>When your code has the potential to take longer to run than the time interval you’ve assigned, it’s better to use recursive <code>setTimeout()</code> — this will keep the time interval constant between executions regardless of how long the code takes to execute, and you won't get errors.</p>
-
-<h3 id="Immediate_timeouts">Immediate timeouts</h3>
-
-<p>Using 0 as the value for <code>setTimeout()</code> schedules the execution of the specified callback function as soon as possible but only after the main code thread has been run.</p>
-
-<p>For instance, the code below (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html">see it live</a>) outputs an alert containing "Hello", then an alert containing "World" as soon as you click OK on the first alert.</p>
-
-<pre class="brush: js">setTimeout(function() {
-  alert('World');
-}, 0);
-
-alert('Hello');</pre>
-
-<p>This can be useful in cases where you want to set a block of code to run as soon as all of the main thread has finished running — put it on the async event loop, so it will run straight afterwards.</p>
-
-<h3 id="Clearing_with_clearTimeout()_or_clearInterval()">Clearing with clearTimeout() or clearInterval()</h3>
-
-<p><code>clearTimeout()</code> and <code>clearInterval()</code> both use the same list of entries to clear from. Interestingly enough, this means that you can use either method to clear a <code>setTimeout()</code> or <code>setInterval()</code>.</p>
-
-<p>For consistency, you should use <code>clearTimeout()</code> to clear <code>setTimeout()</code> entries and <code>clearInterval()</code> to clear <code>setInterval()</code> entries. This will help to avoid confusion.</p>
-
-<h2 id="requestAnimationFrame()">requestAnimationFrame()</h2>
-
-<p><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code> is a specialized looping function created for running animations efficiently in the browser. It is basically the modern version of <code>setInterval()</code> — it executes a specified block of code before the browser next repaints the display, allowing an animation to be run at a suitable frame rate regardless of the environment it is being run in.</p>
-
-<p>It was created in response to perceived problems with <code>setInterval()</code>, which for example doesn't run at a frame rate optimized for the device, sometimes drops frames, continues to run even if the tab is not the active tab or the animation is scrolled off the page, etc. <a href="http://creativejs.com/resources/requestanimationframe/index.html">Read more about this on CreativeJS</a>.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: You can find examples of using <code>requestAnimationFrame()</code> elsewhere in the course — see for example <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a>, and <a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a>.</p>
-</div>
-
-<p>The method takes as an argument a callback to be invoked before the repaint. This is the general pattern you'll see it used in:</p>
-
-<pre class="brush: js">function draw() {
-   // Drawing code goes here
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<p>The idea is that you define a function in which your animation is updated (e.g. your sprites are moved, score is updated, data is refreshed, or whatever), then you call it to start the process off. At the end of the function block you call <code>requestAnimationFrame()</code> with the function reference passed as the parameter, and this instructs the browser to call the function again on the next display repaint. This is then run continuously, as we are calling <code>requestAnimationFrame()</code> recursively.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: If you want to perform some kind of simple constant DOM animation, <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> are probably faster as they are calculated directly by the browser's internal code rather than JavaScript. If however you are doing something more complex and involving objects that are not directly accessible inside the DOM (such as <a href="/en-US/docs/Web/API/Canvas_API">2D Canvas API</a> or <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> objects), <code>requestAnimationFrame()</code> is the better option in most cases.</p>
-</div>
-
-<h3 id="How_fast_does_your_animation_run">How fast does your animation run?</h3>
-
-<p>The smoothness of your animation is directly dependent on your animation's frame rate and it is measured in frames per second (fps). The higher this number is, the smoother your animation will look, to a point.</p>
-
-<p>Since most screens have a refresh rate of 60Hz, the fastest frame rate you can aim for is 60 frames per second (FPS) when working with web browsers. However, more frames means more processing, which can often cause stuttering and skipping — also known as <em>dropping frames</em>, or <em>jank</em>.</p>
-
-<p>If you have a monitor with a 60Hz refresh rate and you want to achieve 60 FPS you have about 16.7 milliseconds (1000 / 60) to execute your animation code to render each frame. This is a reminder that we need to be mindful of the amount of code that we try to run for each pass through the animation loop.</p>
-
-<p><code>requestAnimationFrame()</code> always tries to get as close to this magic 60 FPS value as possible, although sometimes it isn't possible — if you have a really complex animation and you are running it on a slow computer, your frame rate will be less. <code>requestAnimationFrame()</code> will always do the best it can with what it has available.</p>
-
-<h3 id="How_does_requestAnimationFrame()_differ_from_setInterval()_and_setTimeout()">How does requestAnimationFrame() differ from setInterval() and setTimeout()?</h3>
-
-<p>Let's talk a little bit more about how the <code>requestAnimationFrame()</code> method differs from the other methods we looked at earlier. Looking at our code from above:</p>
-
-<pre class="brush: js">function draw() {
-   // Drawing code goes here
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<p>Let's now see how we'd do the same thing using <code>setInterval()</code>:</p>
-
-<pre class="brush: js">function draw() {
-   // Drawing code goes here
-}
-
-setInterval(draw, 17);</pre>
-
-<p>As we said before, we don't specify a time interval for <code>requestAnimationFrame()</code>; it just runs it as quickly and smoothly as possible in the current conditions. The browser also doesn't waste time running it if the animation is offscreen for some reason, etc.</p>
-
-<p><code>setInterval()</code> on the other hand requires an interval to be specified. We arrived at our final value of 17 via the formula <em>1000 milliseconds / 60Hz</em>, and then rounded it up. Rounding up is a good idea, as if you rounded down the browser might try to run the animation faster than 60fps, and it wouldn't make any difference to the smoothness of the animation anyway. As we said before, 60Hz is the standard refresh rate.</p>
-
-<h3 id="Including_a_timestamp">Including a timestamp</h3>
-
-<p>The actual callback passed to the <code>requestAnimationFrame()</code> function can be given a parameter too — a timestamp value that represents the time since the <code>requestAnimationFrame()</code> started running. This is useful as it allows you to run things at specific times and at a constant pace, regardless of how fast or slow your device might be. The general pattern you'd use looks something like this:</p>
-
-<pre class="brush: js">let startTime = null;
-
-function draw(timestamp) {
-    if(!startTime) {
-      startTime = timestamp;
-    }
-
-   currentTime = timestamp - startTime;
-
-   // Do something based on current time
-
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<h3 id="Browser_support">Browser support</h3>
-
-<p><code>requestAnimationFrame()</code> is supported in slightly more recent browsers than <code>setInterval()</code>/<code>setTimeout()</code> — most interestingly it is available in Internet Explorer 10 and above. So unless you need to support older versions of IE with your code, there is little reason to not use <code>requestAnimationFrame()</code>.</p>
-
-<h3 id="A_simple_example">A simple example</h3>
-
-<p>Enough with the theory; let's go through and build our own <code>requestAnimationFrame()</code> example. We're going to create a simple "spinner animation", the kind you might see displayed in an app when it is busy connecting to the server, etc.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: In a real world example, you should probably use CSS animations to run this kind of simple animation. However, this kind of example is very useful to demonstrate <code>requestAnimationFrame()</code> usage, and you'd be more like to use this kind of technique when doing something more complex such as updating the display of a game on each frame.</p>
-</div>
-
-<ol>
- <li>
-  <p>First of all, grab a basic HTML template <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">such as this one</a>.</p>
- </li>
- <li>
-  <p>Put an empty {{htmlelement("div")}} element inside the {{htmlelement("body")}}, then add a ↻ character inside it. This is a circular arrow character that will act as our spinner for this simple example.</p>
- </li>
- <li>
-  <p>Apply the following CSS to the HTML template in whatever way you prefer. This sets a red background on the page, sets the <code>&lt;body&gt;</code> height to <code>100%</code> of the {{htmlelement("html")}} height, and centers the <code>&lt;div&gt;</code> inside the <code>&lt;body&gt;</code>, horizontally and vertically.</p>
-
-  <pre class="brush: css">html {
-  background-color: white;
-  height: 100%;
-}
-
-body {
-  height: inherit;
-  background-color: red;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-div {
-  display: inline-block;
-  font-size: 10rem;
-}</pre>
- </li>
- <li>
-  <p>Insert a {{htmlelement("script")}} element just above the <code>&lt;/body&gt;</code> tag.</p>
- </li>
- <li>
-  <p>Insert the following JavaScript inside your <code>&lt;script&gt;</code> element. Here we're storing a reference to the <code>&lt;div&gt;</code> inside a constant, setting a <code>rotateCount</code> variable to 0, setting an uninitialized variable that will later be used to contain a reference to the <code>requestAnimationFrame()</code> call, and setting a <code>startTime</code> variable to <code>null</code>, which will later be used to store the start time of the <code>requestAnimationFrame()</code>.</p>
-
-  <pre class="brush: js">const spinner = document.querySelector('div');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-</pre>
- </li>
- <li>
-  <p>Below the previous code, insert a <code>draw()</code> function that will be used to contain our animation code, which includes the <code>timestamp</code> parameter:</p>
-
-  <pre class="brush: js">function draw(timestamp) {
-
-}</pre>
- </li>
- <li>
-  <p>Inside <code>draw()</code>, add the following lines. Here we define the start time if it is not defined already (this will only happen on the first loop iteration), and set the <code>rotateCount</code> to a value to rotate the spinner by (the current timestamp, take the starting timestamp, divided by three so it doesn't go too fast):</p>
-
-  <pre class="brush: js">  if (!startTime) {
-   startTime = timestamp;
-  }
-
-  rotateCount = (timestamp - startTime) / 3;
-</pre>
- </li>
- <li>
-  <p>Below the previous line inside <code>draw()</code>, add the following block — this checks to see if the value of <code>rotateCount</code> is above <code>359</code> (e.g. <code>360</code>, a full circle). If so, it sets the value to its modulo of 360 (i.e. the remainder left over when the value is divided by 360) so the circle animation can continue uninterrupted, at a sensible, low value. Note that this isn't strictly necessary, but it is easier to work with values of 0-359 degrees than values like "128000 degrees".</p>
-
-  <pre class="brush: js">if (rotateCount &gt; 359) {
-  rotateCount %= 360;
-}</pre>
- </li>
- <li>Next, below the previous block add the following line to actually rotate the spinner:
-  <pre class="brush: js">spinner.style.transform = 'rotate(' + rotateCount + 'deg)';</pre>
- </li>
- <li>
-  <p>At the very bottom inside the <code>draw()</code> function, insert the following line. This is the key to the whole operation — we are setting the variable we defined earlier to an active <code>requestAnimation()</code> call that takes the <code>draw()</code> function as its parameter. This starts the animation off, constantly running the <code>draw()</code> function at a rate of as close to 60 FPS as possible.</p>
-
-  <pre class="brush: js">rAF = requestAnimationFrame(draw);</pre>
- </li>
-</ol>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: You can find this <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">example live on GitHub</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">source code</a> also).</p>
-</div>
-
-<h3 id="Clearing_a_requestAnimationFrame()_call">Clearing a requestAnimationFrame() call</h3>
-
-<p>Clearing a <code>requestAnimationFrame()</code> call can be done by calling the corresponding <code>cancelAnimationFrame()</code> method (note, "cancel" not "clear" as with the "set..." methods), passing it the value returned by the <code>requestAnimationFrame()</code> call to cancel, which we stored in a variable called <code>rAF</code>:</p>
-
-<pre class="brush: js">cancelAnimationFrame(rAF);</pre>
-
-<h3 id="Active_learning_Starting_and_stopping_our_spinner">Active learning: Starting and stopping our spinner</h3>
-
-<p>In this exercise, we'd like you to test out the <code>cancelAnimationFrame()</code> method by taking our previous example and updating it, adding an event listener to start and stop the spinner when the mouse is clicked anywhere on the page.</p>
-
-<p>Some hints:</p>
-
-<ul>
- <li>A <code>click</code> event handler can be added to most elements, including the document <code>&lt;body&gt;</code>. It makes more sense to put it on the <code>&lt;body&gt;</code> element if you want to maximize the clickable area — the event bubbles up to its child elements.</li>
- <li>You'll want to add a tracking variable to check whether the spinner is spinning or not, clearing the animation frame if it is, and calling it again if it isn't.</li>
-</ul>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: Try this yourself first; if you get really stuck, check out of our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">live example</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">source code</a>.</p>
-</div>
-
-<h3 id="Throttling_a_requestAnimationFrame()_animation">Throttling a requestAnimationFrame() animation</h3>
-
-<p>One limitation of <code>requestAnimationFrame()</code> is that you can't choose your frame rate. This isn't a problem most of the time, as generally you want your animation to run as smoothly as possible, but what about when you want to create an old school, 8-bit-style animation?</p>
-
-<p>This was a problem for example in the Monkey Island-inspired walking animation from our <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing Graphics</a> article:</p>
-
-<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}</p>
-
-<p>In this example we have to animate both the position of the character on the screen, and the sprite being shown. There are only 6 frames in the sprite's animation; if we showed a different sprite frame for every frame displayed on the screen by <code>requestAnimationFrame()</code>, Guybrush would move his limbs too fast and the animation would look ridiculous. We therefore throttled the rate at which the sprite cycles its frames using the following code:</p>
-
-<pre class="brush: js">if (posX % 13 === 0) {
-  if (sprite === 5) {
-    sprite = 0;
-  } else {
-    sprite++;
-  }
-}</pre>
-
-<p>So we are only cycling a sprite once every 13 animation frames. OK, so it's actually about every 6.5 frames, as we update <code>posX</code> (character's position on the screen) by two each frame:</p>
-
-<pre class="brush: js">if(posX &gt; width/2) {
-  newStartPos = -((width/2) + 102);
-  posX = Math.ceil(newStartPos / 13) * 13;
-  console.log(posX);
-} else {
-  posX += 2;
-}</pre>
-
-<p>This is the code that works out how to update the position in each animation frame.</p>
-
-<p>The method you use to throttle your animation will depend on your particular code. For example, in our spinner example we could make it appear to move slower by only increasing our <code>rotateCount</code> by one on each frame instead of two.</p>
-
-<h2 id="Active_learning_a_reaction_game">Active learning: a reaction game</h2>
-
-<p>For our final section of this article, we'll create a 2-player reaction game. Here we have two players, one of whom controls the game using the <kbd>A</kbd> key, and the other with the <kbd>L</kbd> key.</p>
-
-<p>When the <em>Start</em> button is pressed, a spinner like the one we saw earlier is displayed for a random amount of time between 5 and 10 seconds. After that time, a message will appear saying "PLAYERS GO!!" — once this happens, the first player to press their control button will win the game.</p>
-
-<p>{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}</p>
-
-<p>Let's work through this.</p>
-
-<ol>
- <li>
-  <p>First of all, download the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html">starter file for the app</a> — this contains the finished HTML structure and CSS styling, giving us a game board that shows the two players' information (as seen above), but with the spinner and results paragraph displayed on top of one another. We just have to write the JavaScript code.</p>
- </li>
- <li>
-  <p>Inside the empty {{htmlelement("script")}} element on your page, start by adding the following lines of code that define some constants and variables we'll need in the rest of the code:</p>
-
-  <pre class="brush: js">const spinner = document.querySelector('.spinner p');
-const spinnerContainer = document.querySelector('.spinner');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-const btn = document.querySelector('button');
-const result = document.querySelector('.result');</pre>
-
-  <p>In order, these are:</p>
-
-  <ol>
-   <li>A reference to our spinner, so we can animate it.</li>
-   <li>A reference to the {{htmlelement("div")}} element that contains the spinner, used for showing and hiding it.</li>
-   <li>A rotate count — how much we want to show the spinner rotated on each frame of the animation.</li>
-   <li>A null start time — will be populated with a start time when the spinner starts spinning.</li>
-   <li>An uninitialized variable to later store the {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} call that animates the spinner.</li>
-   <li>A reference to the Start button.</li>
-   <li>A reference to the results paragraph.</li>
-  </ol>
- </li>
- <li>
-  <p>Next, below the previous lines of code, add the following function. This simply takes two numerical inputs and returns a random number between the two. We'll need this to generate a random timeout interval later on.</p>
-
-  <pre class="brush: js">function random(min,max) {
-  var num = Math.floor(Math.random()*(max-min)) + min;
-  return num;
-}</pre>
- </li>
- <li>
-  <p>Next add in the <code>draw()</code> function, which animates the spinner. This is exactly the same as the version seen in the simple spinner example we looked at earlier:</p>
-
-  <pre class="brush: js">  function draw(timestamp) {
-    if(!startTime) {
-     startTime = timestamp;
-    }
-
-    let rotateCount = (timestamp - startTime) / 3;
-    spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
-
-    if(rotateCount &gt; 359) {
-      rotateCount -= 360;
-    }
-
-    rAF = requestAnimationFrame(draw);
-  }</pre>
- </li>
- <li>
-  <p>Now it is time to set up the initial state of the app when the page first loads. Add the following two lines, which simply hide the results paragraph and spinner container using <code>display: none;</code>.</p>
-
-  <pre class="brush: js">result.style.display = 'none';
-spinnerContainer.style.display = 'none';</pre>
- </li>
- <li>
-  <p>We'll also define a <code>reset()</code> function, which sets the app back to the original state required to start the game again after it has been played. Add the following at the bottom of your code:</p>
-
-  <pre class="brush: js">function reset() {
-  btn.style.display = 'block';
-  result.textContent = '';
-  result.style.display = 'none';
-}</pre>
- </li>
- <li>
-  <p>OK, enough preparation.  Let's make the game playable! Add the following block to your code. The <code>start()</code> function calls <code>draw()</code> to start the spinner spinning and display it in the UI, hides the <em>Start</em> button so we can't mess up the game by starting it multiple times concurrently, and runs a <code>setTimeout()</code> call that runs a <code>setEndgame()</code> function after a random interval between 5 and 10 seconds has passed. We also add an event listener to our button to run the <code>start()</code> function when it is clicked.</p>
-
-  <pre class="brush: js">btn.addEventListener('click', start);
-
-function start() {
-  draw();
-  spinnerContainer.style.display = 'block';
-  btn.style.display = 'none';
-  setTimeout(setEndgame, random(5000,10000));
-}</pre>
-
-  <div class="blockIndicator note">
-  <p><strong>Note</strong>: You'll see that in this example we are calling <code>setTimeout()</code> without storing the return value (so not <code>let myTimeout = setTimeout(functionName, interval)</code>). This works and is fine, as long as you don't need to clear your interval/timeout at any point. If you do, you'll need to save the returned identifier.</p>
-  </div>
-
-  <p>The net result of the previous code is that when the <em>Start</em> button is pressed, the spinner is shown and the players are made to wait a random amount of time before they are then asked to press their button. This last part is handled by the <code>setEndgame()</code> function, which we should define next.</p>
- </li>
- <li>
-  <p>So add the following function to your code next:</p>
-
-  <pre class="brush: js">function setEndgame() {
-  cancelAnimationFrame(rAF);
-  spinnerContainer.style.display = 'none';
-  result.style.display = 'block';
-  result.textContent = 'PLAYERS GO!!';
-
-  document.addEventListener('keydown', keyHandler);
-
-  function keyHandler(e) {
-    console.log(e.key);
-    if(e.key === 'a') {
-      result.textContent = 'Player 1 won!!';
-    } else if(e.key === 'l') {
-      result.textContent = 'Player 2 won!!';
-    }
-
-    document.removeEventListener('keydown', keyHandler);
-    setTimeout(reset, 5000);
-  };
-}</pre>
-
-  <p>Stepping through this:</p>
-
-  <ol>
-   <li>First we cancel the spinner animation with {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (it is always good to clean up unneeded processes), and hide the spinner container.</li>
-   <li>Next we display the results paragraph and set its text content to "PLAYERS GO!!" to signal to the players that they can now press their button to win.</li>
-   <li>We then attach a <code><a href="/en-US/docs/Web/API/Document/keydown_event">keydown</a></code> event listener to our document — when any button is pressed down, the <code>keyHandler()</code> function is run.</li>
-   <li>Inside <code>keyHandler()</code>, we include the event object as a parameter (represented by <code>e</code>) — its {{domxref("KeyboardEvent.key", "key")}} property contains the key that was just pressed, and we can use this to respond to specific key presses with specific actions.</li>
-   <li>We first log <code>e.key</code> to the console, which is a useful way of finding out the <code>key</code> value of different keys you are pressing.</li>
-   <li>When <code>e.key</code> is "a", we display a message to say that Player 1 won, and when <code>e.key</code> is "l", we display a message to say Player 2 won. Note that this will only work with lowercase a and l — if an uppercase A or L is submitted (the key plus <kbd>Shift</kbd>), it is counted as a different key.</li>
-   <li>Regardless of which one of the player control keys was pressed, we remove the <code>keydown</code> event listener using {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} so that once the winning press has happened, no more keyboard input is possible to mess up the final game result. We also use <code>setTimeout()</code> to call <code>reset()</code> after 5 seconds — as we explained earlier, this function resets the game back to its original state so that a new game can be started.</li>
-  </ol>
- </li>
-</ol>
-
-<p>That's it, you're all done.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: If you get stuck, check out <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html">our version of the reaction game</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html">source code</a> also).</p>
-</div>
-
-<h2 id="Conclusion">Conclusion</h2>
-
-<p>So that's it — all the essentials of async loops and intervals covered in one article. You'll find these methods useful in a lot of situations, but take care not to overuse them — since these still run on the main thread, heavy and intensive callbacks (especially those that manipulate the DOM) can really slow down a page if you're not careful.</p>
-
-<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</p>
-
-
-<h2 id="במודול_זה">במודול זה</h2>
-
-<ul>
- <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Concepts">עקרונות תכנות א-סינכרוני כלליים</a></li>
- <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Introducing">הצגת asynchronous JavaScript</a></li>
- <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Asynchronous JavaScript: שימוש ב-Intervals ו-Timeouts</a></li>
- <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Promises">טיפול בפעולות א-סינכרוניות באמצעות Promises</a></li>
- <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Async_await">הפיכת Asynchronous Programming לקל יותר עם async ועם await</a></li>
- <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">בחירת האפשרות המתאימה</a></li>
-</ul>