JavaScript: البرمجة غير المتزامنة في JavaScript

<script>
console.log('1');
setTimeout(function() {
  console.log('2');
}, 1000);
console.log('3');
</script>

// مثال على الكود في هذا القسم
const message = "مرحبا بالعالم!";
console.log(message);

<div id="output" style="padding: 10px; border: 1px solid #ccc;"></div>

<script>
const output = document.getElementById('output');

function fetchData(callback) {
  output.textContent = 'جاري التحميل...';
  setTimeout(function() {
    callback('تم تحميل البيانات!');
  }, 2000);
}

fetchData(function(data) {
  output.textContent = data;
});
</script>

<script>
getUser(function(user) {
  getOrders(user.id, function(orders) {
    getOrderDetail(orders[0].id, function(detail) {
      getItems(detail.itemId, function(items) {
        console.log('4 مستويات عميقة — أضف تعقيداً أكثر ويصبح غير مقروء');
      });
    });
  });
});
</script>

<script>
const promise = new Promise(function(resolve, reject) {
  // عملية غير متزامنة
  // استدعاء resolve(result) عند النجاح
  // استدعاء reject(error) عند الفشل
});
</script>

<script>
promise
  .then(function(result) { console.log(result); })   // ينفذ عند النجاح
  .catch(function(error) { console.error(error); })    // ينفذ عند الفشل
  .finally(function() { console.log('تم'); });         // ينفذ بغض النظر
</script>

<button id="loadBtn">تحميل البيانات</button>
<div id="output" style="padding: 10px; border: 1px solid #ccc; margin-top: 10px;"></div>

<script>
const btn = document.getElementById('loadBtn');
const output = document.getElementById('output');

function fetchUser() {
  return new Promise(function(resolve, reject) {
    output.textContent = 'جاري التحميل...';
    setTimeout(function() {
      const success = true;
      if (success) {
        resolve({ name: 'أليس', age: 25 });
      } else {
        reject(new Error('فشل التحميل'));
      }
    }, 1500);
  });
}

btn.addEventListener('click', function() {
  fetchUser()
    .then(function(user) {
      output.textContent = 'الاسم: ' + user.name + '، العمر: ' + user.age;
    })
    .catch(function(err) {
      output.textContent = 'خطأ: ' + err.message;
    })
    .finally(function() {
      console.log('اكتمل الطلب (نجاح أو فشل)');
    });
});
</script>

<script>
fetchUser()
  .then(function(user) { return fetchOrders(user.id); })
  .then(function(orders) { return fetchDetail(orders[0].id); })
  .then(function(detail) { console.log(detail); })
  .catch(function(err) { console.error(err); });
</script>

<button id="loadBtn">تحميل البيانات</button>
<div id="output" style="padding: 10px; border: 1px solid #ccc; margin-top: 10px;"></div>

<script>
const btn = document.getElementById('loadBtn');
const output = document.getElementById('output');

function fetchUser() {
  return new Promise(function(resolve) {
    setTimeout(function() {
      resolve({ name: 'بوب', age: 30 });
    }, 1500);
  });
}

btn.addEventListener('click', async function() {
  try {
    output.textContent = 'جاري التحميل...';
    const user = await fetchUser();
    output.textContent = 'الاسم: ' + user.name + '، العمر: ' + user.age;
  } catch (err) {
    output.textContent = 'خطأ: ' + err.message;
  } finally {
    console.log('اكتمل الطلب');
  }
});
</script>

<script>
async function loadAll() {
  try {
    const user = await fetchUser();
    const orders = await fetchOrders(user.id);
    console.log(orders);
  } catch (err) {
    console.error('حدث خطأ ما:', err);
  }
}
</script>

<button id="loadAll">تحميل متزامن</button>
<div id="output" style="padding: 10px; border: 1px solid #ccc; margin-top: 10px;"></div>

<script>
const btn = document.getElementById('loadAll');
const output = document.getElementById('output');

function delay(ms, value) {
  return new Promise(function(resolve) {
    setTimeout(function() { resolve(value); }, ms);
  });
}

btn.addEventListener('click', async function() {
  output.textContent = 'جاري التحميل...';

  const results = await Promise.all([
    delay(1000, 'بيانات المستخدم'),
    delay(1500, 'بيانات الطلبات'),
    delay(800, 'بيانات التكوين')
  ]);

  output.textContent = 'تم تحميل الكل:\n' + results.join(' | ');
});

const raceBtn = document.createElement('button');
raceBtn.textContent = 'تحميل سباق';
document.body.appendChild(raceBtn);

raceBtn.addEventListener('click', async function() {
  const fastest = await Promise.race([
    delay(1000, 'المصدر A (1 ثانية)'),
    delay(500, 'المصدر B (0.5 ثانية)'),
    delay(800, 'المصدر C (0.8 ثانية)')
  ]);
  output.textContent = 'الأسرع: ' + fastest;
});
</script>