الأحداث الزمنية

By


يمكن إنشاء فواصل زمنية من خلال أكواد الجافاسكربت 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>

ليست هناك تعليقات:

إرسال تعليق