في هذا الدرس 4تصفّح المواضيع
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);
Waiting for a Timeout
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
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();
}
Waiting for Files
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>
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.