جافا سكريبت غير متزامن
"سأنهي في وقت لاحق!"
تسمى الوظائف التي تعمل بالتوازي مع وظائف أخرى غير متزامنة
ومن الأمثلة الجيدة على ذلك JavaScript setTimeout ()
جافا سكريبت غير متزامن
كانت الأمثلة المستخدمة في الفصل السابق مبسطة للغاية.
كان الغرض من الأمثلة هو توضيح بناء جملة وظائف رد الاتصال:
مثال
function myDisplayer(something) {
document.getElementById("demo").innerHTML
= something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
في المثال أعلاه ، myDisplayerهو اسم الوظيفة.
يتم تمريره myCalculator()كحجة.
في العالم الحقيقي ، غالبًا ما تُستخدم عمليات الاسترجاعات مع الوظائف غير المتزامنة.
مثال نموذجي هو JavaScript setTimeout().
في انتظار مهلة
عند استخدام وظيفة JavaScript setTimeout()، يمكنك تحديد وظيفة استدعاء يتم تنفيذها عند انتهاء المهلة:
مثال
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}
في المثال أعلاه ، myFunctionيتم استخدام رد الاتصال.
myFunctionتم تمريره إلى setTimeout()كوسيطة.
3000 هو عدد المللي ثانية قبل انتهاء المهلة ، لذلك
myFunction()سيتم استدعاؤه بعد 3 ثوانٍ.
عندما تمرر دالة كوسيطة ، تذكر ألا تستخدم الأقواس.
على اليمين: setTimeout (myFunction ، 3000) ؛
خاطئ:setTimeout (myFunction () ، 3000)؛
بدلاً من تمرير اسم دالة كوسيطة إلى دالة أخرى ، يمكنك دائمًا تمرير دالة كاملة بدلاً من ذلك:
مثال
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
في المثال أعلاه ، function(){ myFunction("I love You !!!"); }
يتم استخدام رد الاتصال. إنها وظيفة كاملة. يتم تمرير الوظيفة الكاملة إلى setTimeout () كوسيطة.
3000 هو عدد المللي ثانية قبل انتهاء المهلة ، لذلك
myFunction()سيتم استدعاؤه بعد 3 ثوانٍ.
في انتظار فترات:
عند استخدام وظيفة JavaScript setInterval()، يمكنك تحديد وظيفة استدعاء يتم تنفيذها لكل فترة زمنية:
مثال
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}
في المثال أعلاه ، myFunctionيتم استخدام رد الاتصال.
myFunctionتم تمريره إلى setInterval()كوسيطة.
1000 هو عدد المللي ثانية بين الفواصل الزمنية ، لذلك
myFunction()سيتم استدعاؤه كل ثانية.
في انتظار الملفات
إذا قمت بإنشاء دالة لتحميل مورد خارجي (مثل برنامج نصي أو ملف) ، فلا يمكنك استخدام المحتوى قبل تحميله بالكامل.
هذا هو الوقت المثالي لاستخدام رد الاتصال.
يقوم هذا المثال بتحميل ملف HTML ( mycar.html) ، ويعرض ملف 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);
في المثال أعلاه ، myDisplayerيتم استخدام رد الاتصال.
myDisplayerتم تمريره إلى getFile()كوسيطة.
يوجد أدناه نسخة من mycar.html:
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>