انتقل إلى محتوى الدرس
الدرس 105
دورة جافا سكريبت

JS Asynchronous

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

أقسام الدرس
4
الأمثلة
6
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
2,941
محتوى الدرس
في هذا الدرس 4تصفّح المواضيع

JS Asynchronous

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

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

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

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

myCalculator(5, 5, myDisplayer);

Waiting for a Timeout

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

Example

HTML
setTimeout(myFunction, 3000);

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

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

HTML
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

HTML
setInterval(myFunction, 1000);

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

Waiting for Files

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

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

Example

HTML
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

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>

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…