درس پانزدهم- رویدادهای زمانی
در این درس می‌خواهیم در مورد رویدادهای زمانی و اجرای کد‌ها در فواصل زمانی متفاوت شرح بدهیم.
رویدادهای زمانی در جاوا اسکریپت
یکی
دیگر از قابلیت‌های جاوا اسکریپت اجرای کدهای آن در فواصل مختلف است. به
این عمل در اصل رویداد زمانی می‌گویند. این یعنی برای اجرای کد‌ها زمان
بندی ویژه‌ای با انتخاب خود تعیین کنیم. انجام زمان بندی در جاوا اسکریپت
بسیار ساده است کافیست که تنها از دو متد مورد نظر برای این کار استفاده
کنیم. این دو متد عبارتند است از:
1.etInterval() // اجرا یک تابع، بارها و بارها و در فواصل زمانی مشخص
2.setTimeout() // اجرا یک تابع، یک بار پس از انتظار تعداد مشخصی از میلی ثانیه
نکته: هر دو این متد‌ها از متدهای آبجکت پنجره (window) در DOM اچ تی ام ال هستند.
متد setInterval
این
متد برای زمان مشخصی -که برنامه نویس تعیین می‌کند- منتظر می‌ماند و سپس
کد‌ها (تابع) را اجرا می‌کند و دوباره ادامه به توقف و اجرا بر اساس زمان
انتظار تعیین شده می‌دهد. یعنی اجرای تابع و توقف، دوباره اجرای تابع و
توقف، این روال برای همیشه ادامه دارد. شیوه نوشتن این متد به شکل زیر است:
window.setInterval( " تابع جاوا اسکریپت " , زمان به واحد میلی ثانیه );
همانطور که می‌بینید در جلوی متد setInterval از کلمه window استفاده شده است که نشان دهنده این مطلب است که این متد از متدهای آبجکت پنجره (window) است. البته نوشتن کلمه window ضروری نیست اما بهر حال باید دانست که متد setInterval از متدهای این آبجکت است.
این متد دارای دو ورودی یا پارامتر است که اولین آن یک «تابع» و دومین آن مدت «فاصله زمانی» تعیین شده برای ایجاد توقف در بین اجراهای تابع هستند.
نکته: هر ثانیه، ۱۰۰۰ میلی ثانیه است.
فرض کنید می‌خواهیم کدهایی را بنویسیم که یک پیغام را در فاصله زمانی سه ثانیه برای بازدید کننده نشان دهد. یعنی هر سه ثانیه این پیغام ظاهر شود (سه ثانیه سه هزار میلی ثانیه است). به کدهای آن توجه کنید:
<!DOCTYPE html>
<html> <body>
<p> بعد از فشار دادن دکمه هر سه ثانیه پیغام ظاهر می شود </p>
<button onclick="myFunction()"> دکمه را بزنید </button>
<script>
function myFunction() {
setInterval(function(){alert(" درود ")},3000); }
</script> </body> </html>
این نمونه کد‌ها برای نشان دادن چگونگی کارکرد تابع setInterval است و دور از ذهن است که بخواهیم برای هر سه ثانیه یک پیغام را به بازدید کننده نمایش دهیم. یک نمونه خوب برای استفاده از این قابلیت نشان دادن ساعت است:
<!DOCTYPE html> <html> <body>
<p id="demo"></p>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer() {
var d=new Date() ;
var t=d.toLocaleTimeString() ;
document.getElementById("demo").innerHTML=t ; }
</script> </body> </html>
در این نمونه متد setInterval برای هر یک ثانیه تابع را فراخوان می‌کند و هر یک ثانیه زمان حال نشان داده می‌شود. به این ترتیب زمان در هر یک ثانیه بروز رسانی شده و ساعت همانند یک ساعت واقعی کار می‌کند.
توقف تکرار در متد setInterval
گفتیم که متد setInterval برای
همیشه اجرا و توقف کد‌ها را تکرار می‌کند اما چه اتفاقی می‌افتد اگر ما
نخواهیم این تکرار اتفاق بیافتد. برای متوقف کردن تکرار متد باید از متد
دیگری با نام clearInterval بهره ببریم. شیوه نوشتن این متد به شکل زیر است:
window.clearInterval(متغیر حاوی توقف)
نکته: مانند متد setInterval در این متد هم نیازی به نوشتن window نیست اما بخاطر یاد آوری اینکه این متد هم به آبجکت پنجره اختصاص دارد آن را نوشته‌ایم.
نکته: برای اینکه بتوانیم از این متد استفاده کنیم باید یک متغیر جهانی ساخته و خروجی متد setInterval را در آن بریزیم و سپس در زمان بکارگیری متد clearInterval از آن متغیر بصورت پارامتر متد استفاده کنیم.
نکته: در هر زمان یا مکان کدنویسی خود که خواستیم از تکرار متد setInterval جلوگیری کنیم متد clearInterval را فراخوان می‌کنیم.
اجازه بدهید با گذاشتن متوقف کننده در نمونه پیشین این جستار (مبحث) را کامل کنیم:
<!DOCTYPE html>
<html> <body>
<p id="demo"></p>
<button onclick="myStopFunction()"> زمان را متوقف کن </button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer() {
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function myStopFunction() {
clearInterval(myVar);
}
</script> </body> </html>
در نمونه بالا به محض فشردن دکمه «زمان را متوقف کن» اجرای متد متوقف شده و زمان می‌ایستد. این عمل با استفاده از نام متغیر جهانی (myVar) که حامل خروجی متد setInterval است انجام می‌شود.
var myVar = setInterval (function(){myTimer()}, 1000 ) ;
همانطور که می‌بینید تابع myStopFunction با استفاده از متد clearInterval و متغیر myVar به عنوان پارامتر متد، عمل متوقف کردن متد setInterval را انجام می‌دهد.
متد setTimeout
پیش از این گفته شد که متد setTimeout برای اجرای یک تابع، یک بار پس از انتظار تعداد مشخصی از میلی ثانیه استفاده می‌شود. شیوه نوشتن این تابع به شکل زیر است:
window.setTimeout("تابع جاوا اسکریپت",زمان به میلی ثانیه);
نکته: از آنجا که این تابع هم متعلق به آبجکت پنجره است در شیوه نگارش متد نیازی به نوشتن کلمه window نیست.
نمونه کدهای زیر نشان دهنده چگونگی عمل این متد هستند.
<!DOCTYPE html>
<html> <body>
<p> سه ثانیه بعد از زدن دکمه زیر عبارت درود نشان داده می شود </p>
<button onclick="myFunction()"> امتحان کن </button>
<script>
function myFunction() {
setTimeout(function(){alert("درود")},3000);
}
</script> </body> </html>
همانطور که می‌بینید متد setTimeout هم دارای دو پارامتر است، یکم تابع برای اجرا و دوم میزان زمان ابتدایی برای ایجاد فاصله برای اجرای تابع. دکمه‌ای با نام «امتحان کن» در زمان فشار داده شدن تابع myFunction را فراخوان می‌کند و تابع myFunction متد setTimeout همراه پارامتر‌هایش را اجرا می‌کند.
توقف اجرای متد setTimeout پیش از اجرای تابع
علارقم اجرای متد setTimeout فقط برای یکبار باز ممکن است که ما بخواهیم اجرای آن را متوقف کنیم. راه متوقف کردن این متد بکارگیری متد دیگری با نام clearTimeout است.
این متد بعد از فراخوانی -چنانچه پیش از زمان اجرای تابع فراخوان شود-
اجرا شده و از اعمال تابع جلوگیری می‌کند. شیوه نگارش این تابع به شرح زیر
می‌باشد:
window.clearTimeout(متغیر حاوی زمان)
نکته: بکارگیری کلمه window در نوشتن این متد اجباری نیست.
برای استفاده از این متد هم باید ابتدا یک متغیر جهانی ساخته و از نام آن برای متوقف کردن متد setTimeout استفاده کنیم.
نکته: فراموش نکنید که این متد زمانی کارایی دارد که پیش از اجرای تابع قراخوان شده در متد setTimeout فراخوان و اجرا شود.
به نمونه زیر توجه کنید:
<!DOCTYPE html>
<html> <body>
<p> دکمه «شروع کن» را برای اجرا و دکمه «متوقف کن» را برای توقف متد فشار دهید </p>
<p>اجرای تابع داخل متد « setTimeout» سه ثانیه طول می کشد پس برای متوقف کردن آن سه ثانیه زمان دارید تا دکمه «متوقف کن» را فشار دهید </p>
<button onclick="myFunction()">شروع کن</button>
<button onclick="myStopFunction()"> متوقف کن </button>
<script>
var myVar;
function myFunction() {
myVar=setTimeout(function(){alert("درود")},3000); }
function myStopFunction() {
clearTimeout(myVar); }
</script> </body> </html>
برای نمونه کدهای بالا دو دکمه در نظر گرفته شده است، «شروع کن» و «متوقف» که اولی برای اجرای تابع حامل متد «setTimeout» است و دومی برای اجرای تابع حامل «clearTimeout».
از آنجا که ما می‌دانیم متد setTimeout فقط یکبار و آن هم بعد از سه ثانیه (سه ثانیه در پارامتر متد تعیین شده است) اجرا می‌شود، برای جلوگیری از اجرای آن تنها سه ثانیه زمان داریم. چراکه پس از سه ثانیه تابع اجرا می‌شود و دیگر قادر به توقف آن نیستیم. بعلاوه آن این متد تنها یکبار اجرا می‌شود پس بعد از اجرا در اصل نیازی به توقف نداریم.
نمونه دیگر برای نمایش ساعت:
<!DOCTYPE html>
<html> <head> <script>
function startTime() {
var today = new Date() ;
var h = today.getHours() ;
var m = today.getMinutes() ;
var s = today.getSeconds() ;
m = checkTime(m) ;
s = checkTime(s) ;
document.getElementById('txt').innerHTML= h+" : "+m+" : "+s ;
t = setTimeout(function(){startTime()},500) ; }
function checkTime(i) {
if (i<10) { برای اضافه کردن عدد صفر در جلوی اعداد کوچکتر از 10 //
i = "0" + i ; }
return i ; }
</script> </head>
<body onload="startTime()">
<div id="txt"></div>
</body> </html>
با توجه به اطلاعات داده شده در این درس باز خوانی این نمونه را به خود شما واگذار می‌کنیم.
parastoo