القائمة الرئيسية

الصفحات

جافا سكربت

الاحداث الزمنية في جافا سكربت



يمكن إنشاء فواصل زمنية من خلال أكواد الجافاسكربت JavaScript . تسمى تلك الطريقة بالأحداث الزمنية .


الأحداث الزمنية جافا سكربت


مع استخدام الجافاسكربت JavaScript فإنه من الممكن إنشاء أكواد بعد فترة أو فاصل زمني معين . تسمى تلك الطريقة بالأحداث الزمنية .

من السهل جداً إنشاء حدث زمني باستخدام الجافاسكربت :

  • setTimeout() : يظهر الكود في وقت ما في الستقبل .

  • clearTimeout() : يلغي وقت معين في المستقبل .

ملاحظة : تعتبر setTimeout() و clearTimeout() طرق مختلفة من الكائن النافذي المستخدم في لغة HTML DOM .


طريقة setTimeout()

التركيبة


var t=setTimeout("javascript statement",milliseconds);

تعيد طريقة setTimeout() قيمة معينة . في التركيبة السابقة تم تخرين القيمة في متغير اسمه t . و اذا أردت إلغاء الوظيفة setTimeout() يمكن استخدام اسم المتغير فقط .

يمكن أن يكون الجزء الأول من تركيبة الكود نصاً لكود ظاهراً أو استدعاءً للكود الوظيفي .

يشير الجزء الثاني من تركيبة الكود إلى عدد أجزء الثانية التي تريد إظهار من تاريخ اليوم إلى وقت الجزء الأول من الكود .

ملاحظة : كل ثانية تعادل 1000 جزء من الثانية .

في المثال التالي عند الضغط على الزر فإن رسالة تنبيه ستظهر بعد 3 ثواني


<html>
	  <head>
	  <script type="text/javascript">
	  function timeMsg()
	  {
	  var t=setTimeout("alertMsg()",3000);
	  }
	  function alertMsg()
	  {
	  alert("مرحباً بكم في المعهد العربي للبرمجة");
	  }

	  </script>
	  </head>
	  <body>

	  <form>
	  <input type="button" value="اضغط هنا"
	  onclick="timeMsg()" />

	  </form>
	  </body>
	  </html>




مثال عن حلقة لا نهائية


للحصول على عداد وقت يعمل بشكل حلقة غير متناهية , يتوجب عليك كتابة كود وظيفي يستدعي نفسه .

في المثال التالي عند الضغط على الزر فإن حقل النص سيبدء بالعد ( للأبد ) بادئاً بالرقم 0 .

يمكن استخدام نفس الكود الوظيفي لفحص العداد اذا كان يعمل بالفعل و ذلك لتجنب إنشاء عدادات أخرى للوقت في حال تم الضغط على الزر أكثر من مرة .

مثال

 
<html>
	  <head>
	  <script type="text/javascript">
	  var c=0;
	  var t;
	  var timer_is_on=0;
	  function timedCount()
	  {
	  document.getElementById('txt').value=c;
	  c=c+1;
	  t=setTimeout("timedCount()",1000);
	  }
	  function doTimer()
	  {
	  if (!timer_is_on)
	  {
	  timer_is_on=1;
	  timedCount();
	  }
	  }

	  </script>
	  </head>

	  <body>

	  <form dir="rtl">
	  <input type="button" value="إبدء العد" onclick="doTimer()">
	  <input type="text" id="txt" />
	  </form>

	  </body>
	  </html>




طريقة clearTimeout()

التركيبة


clearTimeout(setTimeout_variable)

يعتبر المثال التالي نفس مثال العداد الا نهائي السابق . ولكن الاختلاف الوحيد قمنا بإضافة زر "إيقاف العداد" وذلك لإيقاف عداد الوقت .
	  <html>
	  <head>
	  <script type="text/javascript">

	  var c=0;
	  var t;
	  var timer_is_on=0;
	  function timedCount()
	  {
	  document.getElementById('txt').value=c;
	  c=c+1;
	  t=setTimeout("timedCount()",1000);
	  }
	  function doTimer()
	  {
	  if (!timer_is_on)
	  {
	  timer_is_on=1;
	  timedCount();
	  }
	  }
	  function stopCount()
	  {
	  clearTimeout(t);
	  timer_is_on=0;
	  }

	  </script>
	  </head>
	  <body>

	  <form dir="rtl">
	  <input type="button" value="إبدء العد" onclick="doTimer()">
	  <input type="text" id="txt">
	  <input type="button" value="إيقاف العد" onclick="stopCount()">
	  </form>

	  </body>
	  </html>