الفترة setInterval في جافاسكريبت
الفترة setInterval في الجافاسكربت من خلالها نستطيع تكرار تنفيذ الأوامر الذي نقوم بتحديدها, هذا ما نسميه (جدولة الإستدعاءات scheduling a call).
setInterval(اذا اردنا تشغيل فنكشن){
/الاوامر
},);
يوجد للجدولة تابعين يتم إستخدامهم و هما:
- setTimeout يتم عن طريق هذا التابع تشغيل الدالة مرّة واحدة فقط بعد فترة من الزمن.
- setInterval يتم تشغيل الدالة بشكل متكرر, و يبدأ التكرار بعد فترة من الزمن ويتكرّر حسب الفترة التي حدّدتها.
مثال 1
سوف نعمل ديالوك نافذه منبثقة تظهر تلقائياً كل ثلاث ثواني, سوف نغير الخلفية اولاً من ملف html.
<body style= "background: salmon;">
وفي ملف الجافاسكربت نكتب.
setInterval(function test(){
alert("Nusur Tech") ;
},3000);
نتيجة هذه العملية تكون عبارة عن ديالوك منبثق يظهر كل ثلاث ثواني, و الرقم 3000 يعني ثلاث ثواني أي يعني كل 1000 تعني ثانية واحدة.
إستخدام الفترة setInterval ضمن الدوال
مثال 2
function test(){
alert("Nusur Tech") ;
}
setInterval(test,3000);
أنشأنا دالة بإسم test و من ثم وضعنا له أوامر الطباعة عبر alert. و في النهاية كتبنا الميثود setInterval و في الأقواس حددنا له الدالة و كتبنا عدد الثواني هي 3 و ستكون النتيجة كما بالمثال الأول.
سوف تبقى تخرج هذه النافذة المنبثقة كل 3 ثواني..
إيقاف التكرار بواسطة clearInterval جافاسكربت
نستخدم clearInterval من أجل إيقاف التكرار في البرنامج عندما نستخدم التكرار عبر setInterval.
مثال 3
ننشئ زر button في ملف html و نستخدم معه الخاصية onclick.
<button id="stop" onclick="stopInterval">ايقاف</button>
في الجافاسكربت.
function test(){
alert("Nusur Tech");
}
var myInterval = setInterval(test,3000);
function stopInterval(){
clearInterval(myInterval);
}
أنشأنا متغير بإسم myInterval لربطه مع الأوامر و أنشأنا دالة بإسم stopInterval و شغلنا الدالة للإيقاف عبر clearInterval . هنا سيبقى التكرار يعمل إلى أن يتم الضغط على زر الإيقاف حتى يتوقف عن العمل.
إستخدام setInterVal مع الكلاس
مثال 4
class MyPage{
constructor(){
var myInterval = setInterVal()(=>{
this.testInterVal();
},3000);
}
testInterVal(){
alert("يعمل");
}
}
onload = new MyPage();
أنشأنا كلاس بإسم MyPage و كونستركتور, و بعده أنشأنا متغير ضمن الكونستركتور بإسم myInterval و حددنا عدد الثواني التي يتم تشغيل الأوامر بها و هي 3 ثواني. و أعطينا التشغيل يظهر بنافذه منبثقة بكلمة يعمل و هذه الطريقة آمنة أكثر, وشغلنا هذا الكلاس عبر onload و سوف تكون نفس النتائج السابقة.
المهلة setTimeout في جافاسكربت
تستخدم setTimeout من أجل إعطاء مؤقت أو مهلة لأجل تنفيذ أوامر ما و ضبط مهلة على عدة ثواني أو دقائق من فتح الصفحة ينتقل للصفحة التالية أو غيرها من الأوامر.
الشكل العام لكتابة setTimeout جافاسكربت
setTimeout(run function or method, عدد الثواني);
إستخدام المهلة setTimeout ضمن الدوال
function tech(){
alert("تجربة");
}
setTimeout(tech,4000);
أنشأنا دالة بإسم tech و طريقة عرض البيانات عن طريق alert و يظهر بداخله كلمة تجربة. ووضعنا تنفيذ الأوامر مرة واحدة فقط بعد أربع ثواني. سوف يتنفذ الأمر مرة واحدة فقط و يتوقف بعكس setInterval.
إيقاف تنفيذ الأوامر بواسطة clearTimeout
لإيقاف تنفيذ الأوامر قبل تنفيذها نستخدم clearTimeout كما سوف نلاحظه في المثال التالي.
function tech(){
alert("تجربة");
}
var timeOut = setTimeout(tech,4000);
clearTimeout(timeOut);
أنشأنا دالة بإسم tech و طريقة عرض البيانات عن طريق alert و يظهر بداخله كلمة تجربة. و وضعنا تنفيذ الأوامر مرة واحدة فقط بعد أربع ثواني, ثم أوقفنا التنفيذ بواسطة clearTimeout. هكذا لن تعمل الأوامر لأننا أوقفناها عبر الأمر clearTimeout. لنعمل نفس الأمر السابق لكن عبر زر button و عند الضغط عليه يوقف العملية عبر الخاصية onclick.
<button onclick="clearTimeOut()">اضغط للحذف</button>
في ملف الجافاسكربت
function tech(){
alert("تجربة");
}
var timeOut = setTimeout(tech,4000);
function clearTimeOut(){
clearTimeout(timeOut);
}
عند الضغط على هذا الزر لن يتم تنفيذ الأوامر اطلاقاً لأننا وضعنا أوامر عند الضغط عليه لن تعمل الأوامر.
إستخدام setTimeout ضمن الكلاسات
class MyPage{
constructor(){
var myTimeOut = setTimeout(()=>{
this.testTimeOut();
},4000);
}
testTimeOut(){
alert("يعمل بشكل صحيح");
}
}
onload = new MyPage();
ميزة setTimeout تعمل كـ مؤقت لتنفيذ الأوامر الموضوعة به و تنفذ الأوامر مرة واحدة فقط بعد المدة المحددة له. و لا يعيد التكرار أي يكون بعكس setInterval التي تبقى تكرر الأوامر حسب المدة الموضوعة له إلى لا نهاية.