المهلة setTimeout و الفترة setInterval في جافاسكربت - ProgrammerTech
Language:

Search

المهلة setTimeout و الفترة setInterval في جافاسكربت

  • Share this:
المهلة setTimeout و الفترة setInterval في جافاسكربت

الفترة setInterval في جافاسكريبت

الفترة setInterval في الجافاسكربت من خلالها نستطيع تكرار تنفيذ الأوامر الذي نقوم بتحديدها, هذا ما نسميه (جدولة الإستدعاءات scheduling a call).

setInterval(اذا اردنا تشغيل فنكشن){
	/الاوامر
},);

يوجد للجدولة تابعين يتم إستخدامهم و هما:

  1. setTimeout يتم عن طريق هذا التابع تشغيل الدالة مرّة واحدة فقط بعد فترة من الزمن.
  2. setInterval يتم تشغيل الدالة بشكل متكرر, و يبدأ التكرار بعد فترة من الزمن ويتكرّر حسب الفترة التي حدّدتها.

مثال 1

سوف نعمل ديالوك نافذه منبثقة تظهر تلقائياً كل ثلاث ثواني, سوف نغير الخلفية اولاً من ملف html.

<body style= "background: salmon;">

وفي ملف الجافاسكربت نكتب.

setInterval(function test(){
	alert("Programmer Tech") ;
},3000);

نتيجة هذه العملية تكون عبارة عن ديالوك منبثق يظهر كل ثلاث ثواني, و الرقم 3000 يعني ثلاث ثواني أي يعني كل 1000 تعني ثانية واحدة.

 

إستخدام الفترة setInterval ضمن الدوال

مثال 2

function test(){
	alert("Programmer Tech") ;
}
setInterval(test,3000);

أنشأنا دالة بإسم test و من ثم وضعنا له أوامر الطباعة عبر alert. و في النهاية كتبنا الميثود setInterval و في الأقواس حددنا له الدالة و كتبنا عدد الثواني هي 3 و ستكون النتيجة كما بالمثال الأول.

asfjj.webp

 

سوف تبقى تخرج هذه النافذة المنبثقة كل 3 ثواني..

 

إيقاف التكرار بواسطة clearInterval جافاسكربت

نستخدم clearInterval من أجل إيقاف التكرار في البرنامج عندما نستخدم التكرار عبر setInterval.

مثال 3

ننشئ زر button في ملف html و نستخدم معه الخاصية onclick.

<button id="stop" onclick="stopInterval">ايقاف</button>

في الجافاسكربت.

function test(){
	alert("Programmer 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 التي تبقى تكرر الأوامر حسب المدة الموضوعة له إلى لا نهاية.


Muhammad Alush

Muhammad Alush

إسمي محمد تركي العلوش من سورية من ريف حلب الشرقي 1994, محب للتقنية و التعلم الذاتي, و جميع خبراتي تعلمتها ذاتياً, و اللغات البرمجية التي أتقنها هي html, css, javascript, php, c, python بالإضافة إلى حبي الكبير لمجال الشبكات.

موقعي programmer-tech.com