Lesson 15 / الدرس 15

Why asynchronous code exists / لماذا وُجدت الشيفرة اللاتزامنية

A page has one thread, and everything competes for it: your code, the clicks, the scrolling, the drawing. Understanding that single queue is what makes promises and async/await make sense rather than feel like ceremony.

للصفحة خيط واحد، وكل شيء يتنافس عليه: شيفرتك والنقرات والتمرير والرسم. وفهم ذلك الطابور الواحد هو ما يجعل الوعود وasync/await منطقية بدل أن تبدو طقسًا.

One thread, one queue

while (Date.now() - start < 3000) { }   three seconds of work

during those three seconds the page cannot:
  redraw       respond to a click       accept typing       scroll smoothly

The demonstration runs a counter every 100 milliseconds and gives you a button that does three seconds of pointless arithmetic. Watch the counter while you hold the button down, and try typing in the box at the same time. Nothing is broken — the thread is simply busy, and a busy thread cannot do anything else.

What waiting actually means

Now replace the pointless arithmetic with something real: asking a server for data. That takes somewhere between 50 milliseconds and several seconds, and none of it is your code running — it is your code waiting. If waiting blocked the thread the way the first button did, every page that loads anything would freeze while it loaded. So the browser does not let you wait. It takes your request, hands you a receipt, and calls you back when the answer arrives. That receipt is a promise, and the next three lessons are about it.

Kind of work	Who does the waiting	Blocks the page?
A loop over a million numbers	Your code — it is really running	Yes
A network request	The browser, elsewhere	No
A timer	The browser	No
Reading a file the user picked	The browser	No
A very large JSON.parse	Your code	Yes

Asynchronous code helps with the middle three and does nothing at all for the first and last. This distinction matters: people reach for async to fix a slow loop and are surprised when it changes nothing. The fix for genuinely slow code is less work or smaller slices, which is what the second button demonstrated.

والشيفرة اللاتزامنية تساعد في الثلاثة الوسطى ولا تفعل شيئًا البتة للأول والأخير. وهذا التمييز مهم: فالناس يلجؤون إلى async لإصلاح حلقة بطيئة ويُفاجَؤون حين لا يغيّر شيئًا. وعلاج الشيفرة البطيئة فعلًا عمل أقل أو شرائح أصغر، وهو ما بيّنه الزر الثاني.

Try it live / جرّب بنفسك

<p>Counter: <strong id="count">0</strong></p>
<button id="block">Block for 2 seconds</button>
<p><input placeholder="type here while it runs" size="30"></p>

<script>
  const countEl = document.getElementById('count');
  let n = 0;
  setInterval(function () { n = n + 1; countEl.textContent = n; }, 100);

  document.getElementById('block').addEventListener('click', function () {
    const start = Date.now();
    while (Date.now() - start < 2000) { }
  });
</script>

Preview / المعاينة

Check yourself / اختبر نفسك

1. What happens to clicks made while the thread is blocked?

2. Will making a slow loop async stop it freezing the page?

هل جعل حلقة بطيئة async يمنعها من تجميد الصفحة؟

3. What does "asynchronous" actually change?

Your task / مهمتك

Reproduce the freeze yourself: a visible heartbeat, a button that blocks for two seconds, and a text input. While it is blocked, click the button three more times and type a word, then describe in a comment exactly what happened when the thread came back. Then add a second button that does the same amount of work in slices and keeps the heartbeat running, and write one sentence on which of the two kinds of work in the table asynchronous code cannot help with.

أعد إنتاج التجمّد بنفسك: نبضة مرئية، وزر يحجب ثانيتين، ومدخل نصي. وأثناء الحجب انقر الزر ثلاث مرات أخرى واكتب كلمة، ثم صف في تعليق ما حدث بالضبط حين عاد الخيط. ثم أضف زرًا ثانيًا يقوم بالقدر نفسه من العمل في شرائح ويبقي النبضة تعمل، واكتب جملة عن أي نوعي العمل في الجدول لا تستطيع الشيفرة اللاتزامنية مساعدته.

A heartbeat that visibly stops نبضة تتوقف على نحو مرئي
Queued clicks and typing described النقرات المصفوفة والكتابة موصوفة
A sliced version that stays responsive نسخة مشرَّحة تبقى مستجيبة
One sentence on what async cannot fix جملة عما لا تصلحه اللاتزامنية