JavaScript

JS Asynchronous

في هذا الدرس سوف نتعرف علي ال Asynchronous او التزامن وهو الذي نستطيع من خلاله تحديد الفترة الزمنية التي يتم بعدها تنفيذ دالة معينة باستخدام لغة الجافاسكريبت 

التاريخ

13 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

994

المواضيع

24
الشروحات chevron_left JS Asynchronous chevron_left JavaScript

JS Asynchronous

</> JS Asynchronous

تسمي الدوال التي يتم تنفيذها بالتوازي مع دوال اخري بأنها غير متزامنة asynchronous ومن امثلة هذه الدوال هي دالة "( )setTimeout

في المثال التالي استخدامنا ال callback وهو الذي يمكننا من تمرير دالة ك argument بداخل دالة اخري وفي هذا المثال قمنا بتمرير الدالة "myDisplayer `` بداخل الدالة "myCalculator "

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}

myCalculator(5, 5, myDisplayer);

في الاستخدامات الحقيقية في البرامج عادة ما يتم استخدام ال callback مع احدي الدوال الغير متزامنة مثل دالة "( )setTimeout "

</> Waiting for a Timeout

نستطيع استخدام ال callback مع ال asynchronous بحيث يمكننا من تمرير دالة معينة ك parameter بداخل دالة اخري ويتم تنفيذ هذه الدالة بعد وقت معين نقوم بتحديده عن طريق استخدام الدالة ( )setTimeout 

Example
setTimeout(myFunction, 3000);

function myFunction() {
  document.getElementById("demo").innerHTML = "I love You !!";
}

بدلا من تمرير اسم الدالة التي نريد انشاء callback عليها وانشاء التعريف الخاص بها في مكان اخر يمكننا تمرير دالة كاملة مع التعريف الخاص بها ك callback ففي المثال التالي قمنا بتمرير دالة كاملة وهي ( )myFunction ك argument الي الدالة ( )setTimeout وقمنا بتحديد الزمن الذي يتم تنفيذ الدالة بعده وهو 3000 ملي ثانية

setTimeout(function() { myFunction("I love You !!!"); }, 3000);

function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

</> Waiting for Intervals

( )setInterval هي عبارة عن دالة تستخدم في تنفيذ دالة معينة في كل مرة يتم خلالها انقضاء فترة زمنية معينة 

والمثال التالي نقوم خلاله بأنشاء دالة ( )setInterval والتي تأخذ اثنان من ال arguments وهم 

  • ( )myFunction : وهي عبارة عن دالة يتم ارسالها ك callback function ليتم تنفيذها بعد انقضاء وقت معين 
  • 1000 : وهي عبارة عن فترة زمنية بالملي ثانية وهي الوقت الذي يتم تنفيذ الدالة بعد انتهائه 
Example
setInterval(myFunction, 1000);

function myFunction() {
  let d = new Date();
  document.getElementById("demo").innerHTML=
  d.getHours() + ":" +
  d.getMinutes() + ":" +
  d.getSeconds();
}

الفرق بين كل من دالة 

  • ( )setInterval : تقوم بتنفيذ ال callback function بشكل متكرر ويفصل بين كل مرة يتم تنفيذها فترة زمنية محددة 
  • ( )setTimeout : تقوم بتنفيذ ال callback function مرة واحدة بعد انتهاء فترة زمنية معينة 

</> Waiting for Files

إذا قمت بإنشاء دالة لتحميل عنصر خارجي (مثل كود معين أو ملف) ، فلا يمكنك استخدام المحتوى الموجود بدالخه قبل تحميله بالكامل ويعتبر هذا هو الوقت المثالي لاستخدام ال callback.

يقوم هذا المثال بتحميل ملف HTML (mycar.html) ، وبعرضه في صفحة ويب بعد تحميل الملف بالكامل:

Example
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

function getFile(myCallback) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.html");
  req.onload = function() {
    if (req.status == 200) {
      myCallback(this.responseText);
    } else {
      myCallback("Error: " + req.status);
    }
  }
  req.send();
}

getFile(myDisplayer);

mycar.html

<img src="img_car.jpg" alt="Nice car" style="width:100%">

<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads, to have seating for one to eight people, to typically have four wheels.</p>

<p>(Wikipedia)</p>
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.