الجزء الرابع عشر – المتقدم (Advanced) Asynchronous JavaScript – سلسلة FSWD – JS

ahmedمنذ 4 أسابيع

0 138 3 دقائق

🟡 1. setTimeout & setInterval

✅ setTimeout

دالة setTimeout() بتنفذ دالة معينة بعد فترة زمنية محددة (بالميلي ثانية). بتستخدم لتنفيذ كود بشكل غير متزامن بعد فترة معينة.

التركيب

setTimeout(function, delay);

function: الدالة اللي هتتنفذ بعد التأخير.
delay: التأخير بالميلي ثانية.

✅ مثال

console.log("Start");

setTimeout(() => {
  console.log("This is printed after 2 seconds");
}, 2000);  // 2000 ملي ثانية = 2 ثواني

console.log("End");

النتيجة المتوقعة

Start
End
This is printed after 2 seconds

التفسير: الكود بينفذ بالتتابع، والدالة داخل setTimeout() هتتنفذ بعد التأخير اللي هو 2 ثانية.

✅ setInterval

دالة setInterval() بتنفذ الدالة بشكل متكرر على فترات زمنية محددة.

التركيب

setInterval(function, delay);

function: الدالة اللي هتتنفذ بشكل متكرر.
delay: الفاصل الزمني بالميلي ثانية بين كل تنفيذ.

✅ مثال

let count = 0;

const intervalID = setInterval(() => {
  count++;
  console.log(`Count: ${count}`);
  
  if (count === 5) {
    clearInterval(intervalID);  // وقف التكرار بعد 5 مرات
  }
}, 1000);  // 1000 ملي ثانية = 1 ثانية

النتيجة المتوقعة:

Count: 1
Count: 2
Count: 3
Count: 4
Count: 5

التفسير: الدالة في setInterval() هتتنفذ كل ثانية، وهنوقف التكرار باستخدام clearInterval() بعد 5 مرات.

🟡 2. Callback functions

الدوال الاسترجاعية (Callback functions) هي دوال بتتحدد في وقت لاحق، وتُنفذ بعد اكتمال عملية معينة.

✅ مثال

function fetchData(callback) {
  console.log("Fetching data...");
  setTimeout(() => {
    console.log("Data fetched");
    callback("Data received");
  }, 2000);
}

function displayData(data) {
  console.log(data);  // "Data received"
}

fetchData(displayData);

الشرح: الدالة fetchData() بتنفذ عملية غير متزامنة (مثل جلب بيانات من السيرفر) وبعد ما تخلص، هيتم استدعاء دالة displayData باستخدام Callback.

🟡 3. Promises

الـ Promises هي طريقة للتعامل مع العمليات غير المتزامنة بشكل أكثر وضوحًا وهي تعتمد على حالة الكود:

Pending: في حالة المعالجة.
Fulfilled: العملية تمت بنجاح.
Rejected: العملية فشلت.

✅ تركيب الـ Promise

let promise = new Promise(function(resolve, reject) {
  // العملية غير المتزامنة
  let success = true;

  if (success) {
    resolve("Success!");
  } else {
    reject("Error!");
  }
});

promise.then(
  (message) => console.log(message),  // if resolved
  (message) => console.log(message)   // if rejected
);

✅ مثال مع then و catch:

let myPromise = new Promise((resolve, reject) => {
  let success = true;
  
  if (success) {
    resolve("Data is loaded successfully");
  } else {
    reject("Error in loading data");
  }
});

myPromise
  .then((message) => console.log(message))   // إذا كانت النتيجة ناجحة
  .catch((message) => console.log(message)); // إذا كانت النتيجة فاشلة

النتيجة المتوقعة:

Data is loaded successfully

🟡 4. async / await

الـ async/await هما طريقة مختصرة للعمل مع Promises. بيخلوا الكود المتعلق بالعمليات غير المتزامنة يبدو متسلسلًا وواضحًا.

✅ async function:

بتحدد أن الدالة هترجع Promise.
بتسمح باستخدام await داخلها.

✅ await:

بيخلي الكود ينتظر لحد ما الـ Promise يتم حلها أو رفضها.

✅ مثال باستخدام async/await:

function fetchData() {
  return new Promise((resolve, reject) => {
    let success = true;
    
    setTimeout(() => {
      if (success) {
        resolve("Data is successfully fetched");
      } else {
        reject("Error fetching data");
      }
    }, 2000);
  });
}

async function getData() {
  try {
    let result = await fetchData();
    console.log(result);  // "Data is successfully fetched"
  } catch (error) {
    console.log(error);   // in case of error
  }
}

getData();

النتيجة المتوقعة:

Data is successfully fetched

التفسير:

الكود يستخدم async لتحديد أن الدالة getData() غير متزامنة.
await بيسمح بانتظار fetchData() لحد ما تخلص وتُرجع نتيجة.
try/catch لتعامل مع الأخطاء.

✅ مثال كامل يجمع كل الأفكار

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Asynchronous JavaScript</title>
</head>
<body>
  <script>
    // 1. setTimeout & setInterval
    setTimeout(() => {
      console.log("This is printed after 3 seconds");
    }, 3000);
    
    let count = 0;
    const intervalID = setInterval(() => {
      count++;
      console.log(`Count: ${count}`);
      
      if (count === 5) {
        clearInterval(intervalID);  // وقف التكرار بعد 5 مرات
      }
    }, 1000);  // 1000 ملي ثانية = 1 ثانية

    // 2. Callback function
    function fetchData(callback) {
      console.log("Fetching data...");
      setTimeout(() => {
        console.log("Data fetched");
        callback("Data received");
      }, 2000);
    }

    function displayData(data) {
      console.log(data);
    }

    fetchData(displayData);

    // 3. Promises
    let promise = new Promise((resolve, reject) => {
      let success = true;
      
      if (success) {
        resolve("Data is loaded successfully");
      } else {
        reject("Error in loading data");
      }
    });

    promise
      .then((message) => console.log(message))   // إذا كانت النتيجة ناجحة
      .catch((message) => console.log(message)); // إذا كانت النتيجة فاشلة

    // 4. async/await
    async function getData() {
      try {
        let result = await fetchDataAsync();
        console.log(result);
      } catch (error) {
        console.log(error);
      }
    }

    function fetchDataAsync() {
      return new Promise((resolve, reject) => {
        let success = true;

        setTimeout(() => {
          if (success) {
            resolve("Data fetched successfully with async/await");
          } else {
            reject("Error with async/await");
          }
        }, 2000);
      });
    }

    getData();
  </script>
</body>
</html>

✅ شرح الكود:

setTimeout & setInterval: تم استخدامهم لتأخير التنفيذ وتنفيذ التكرار.
Callback function: استخدمنا الدالة fetchData مع Callback لانتظار البيانات.
Promises: تعاملنا مع البيانات باستخدام Promises.
async/await: استخدمنا async/await لتبسيط التعامل مع العمليات غير المتزامنة.

✅ ملخص النقاط:

setTimeout & setInterval: أدوات لتأخير التنفيذ أو تنفيذ الدوال بشكل متكرر.
Callback functions: دوال تُنفذ بعد إتمام عملية غير متزامنة.
Promises: التعامل مع العمليات غير المتزامنة بطريقة أكثر وضوحًا.
async/await: طريقة مختصرة للانتظار والتعامل مع Promises بشكل متسلسل وواضح.