JS Asynchronous
في هذا الدرس سوف نتعرف علي ال Asynchronous او التزامن وهو الذي نستطيع من خلاله تحديد الفترة الزمنية التي يتم بعدها تنفيذ دالة معينة باستخدام لغة الجافاسكريبت
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات chevron_left JS Asynchronous chevron_left JavaScript
JS Asynchronous
</> JS Asynchronous
في المثال التالي استخدامنا ال 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>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
