تایمر در جاوااسکریپت – آموزش جاواسکریپت مقدماتی درس 25
در این آموزش شما با تابع های زمان سنجی و تایمر در جاوااسکریپت آشنا می شوید.
کار کردن با تایمرها در جاوااسکریپت
یک تایمر تابعی است که شما را قادر می کند تا بتوانید یک عملکرد را در مدت زمان مشخصی به انجام برسانید.
با استفاه از تایمرها شما می توانید اجرای یک کد را تا زمان مشخصی به تاخیر بیندازید، بنابراین آن دقیقا در زمانی که یک رویداد خاص فعال می شود و یا برای مثال صفحه به صورت کامل بارگذاری می شود منتظر می ماند. برای مثال شما می توانید از تایمر استفاده کنید تا بنرهای تبلیغاتی شما در وب سایت در مدت زمان مشخصی نمایش داده شوند، و یا آنکه یک ساعت زمان واقعی انجام یک کار را به کاربر نمایش دهد و موارد دیگر؛ در اینجا ما از دو تابع به نام های setTimerout() و setInTeravel() برای این منظور استفاده می کنیم.
در ادامه ما به شما نشان خواهیم داد که چطور تایمرها را ایجاد کنید تا یک کد را با تاخیر راه‌اندازی کنندو چطور یک و یا چند عملکرد با تکرار زمانی مشخصی انجام شوند. تمامی این موارد را ما در جاوااسکرپیت انجام خواهیم داد.
اجرای یک کد، بعد از یک تاخیر مشخص
تابع های setTimeout() برای آن اجرا می شوند که یک تابع و یا یک بخش از کد، تنها یک بار و در دوره زمانی مشخصی اجرا شوند. سینتکس اصلی این موارد به صورت setTimeout(function, milliseconds) است.
این تابع می تواند دو پارامتر را قبول کند، یک تابع، که دقیقا همان تابعی است که باید اجرا شود و یک پارامتر زمانی که مدت زمان تاخیر را مشخص می کند. اعدادی که برای تاخیر زمانی وارد می شوند باید بر حسب میلی ثانیه باشند، برای همین برای تاخیر یک ثانیه ای باید مقدار 1000 را وارد کنید که نشان دهنده هزار میلی ثانیه یا یک ثانیه است. بیائید ببینیم که وب ورکر چطور کار می کند:
مثال
<script>
function myFunction() {
alert('Hello World!');
}
</script>
<button onclick="setTimeout(myFunction, 2000)">Click Me</button>
در مثالی که در بالا آمده است، بعد از آنکه کاربر بر روی دگمه کلیک کرد، یک پیام هشدار برای او نمایش داده می شود.
نکته
اگر پارامتر تاخیر به هر علتی حذف شود و یا تعریف نشود، مقدار صفر برای آن در نظر گرفته می شود، این به معنای آن است که تابع تعریف شده در این متد، بلافاصله پس از فراخوان شدن اجرا می گردد.
اجرای کد در بازه های زمانی منظم.
به صورت مشابه، شما می توانید از تابع setInterval() استفاده کنید تا بتوانید یک تابع و یا یک بخش از کد را به تکرار در بازه های زمانی مشخصی اجرا کنید. سینتکس متد این تابع به صورت setInterval(function, milliseconds) است.
این تابع دو پارامتر را قبول می کند: پارامتر اول تابع است، این تابع همان تابعی است که قرار است به تکرار اجرا شود، و پارامتر دوم بازه زمانی است که بر حسب میلی ثانیه تعریف می شود. برای مثال در صورتی که مقدار آن را برابر با 1000 وارد کنید، این متد تابع وارد شده را هر یک ثانیه یک بار اجرا می کند. در پائین مثالی را برای درک بهتر شما آورده ایم:
مثال
<script>
function showTime() {
var d = new Date();
document.getElementById("clock").innerHTML = d.toLocaleTimeString();
}
setInterval(showTime, 1000);
</script>
<p>The current time on your computer is: <span id="clock"></span></p>
مثالی که در بالا آورده شده است تابع showTime() را به صورت مرتب هر یک ثانیه یکبار اجرا می کند. این تابع زمان فعلی را از رایانه دریافت کرده و به صورت مرتب آن را بر روی مرورگر نشان می دهد.
متوقف کردن اجرای کد یا کنسل کردن تایمر
هر دو متد setTimeout() و setInterval() یک ID منحصر به فرد را بر می گردانند (یک مقدار صحیح یکپارچه، که به عنوان caller timer identifier شناخته می شود)، با استفاده از این ID تایمر ساخته شده به وسیله این متد شناسائی می شود.
این ID می تواند برای غیرفعال کردن و یا پاک کردن تایمر و متوقف کردن اجرای کدهای پش آن به کار رود. پاک کردن تایمر می تواند به کمک دو متد clearTimeout() و clearinterval() انجام گیرد.
تابع setTimerout()یک پارامتر منحصر به فرد و یک ID را دریافت می کند و یک تایمر که به وسیله setTimeout() تعریف شده است را پاک می کند، برای درک بهتر این مسئله به مثالی که در پائین آمده است دقت کنید.
مثال
<script>
var timeoutID;
function delayedAlert() {
timeoutID = setTimeout(showAlert, 2000);
}
function showAlert() {
alert('This is a JavaScript alert box.');
}
function clearAlert() {
clearTimeout(timeoutID);
}
</script>
<button onclick="delayedAlert();">Show Alert After Two Seconds</button>
<button onclick="clearAlert();">Cancel Alert Before It Display</button>
به صورت مشابه نیز متد clearInterval() هم برای پاک کردن یا غیرفعال کردن تایمرهائی که با استفاده از متد setInterval() ساخته شده اند به کار گرفته می شوند.
مثال
<script>
var intervalID;
function showTime() {
var d = new Date();
document.getElementById("clock").innerHTML = d.toLocaleTimeString();
}
function stopClock() {
clearInterval(intervalID);
}
var intervalID = setInterval(showTime, 1000);
</script>
<p>The current time on your computer is: <span id="clock"></span></p>
<button onclick="stopClock();">Stop Clock</button>
نکته
از نقطه نظر تکنیکی، شما می توانید از متد clearTimeout() و clearInterval() به جای همدیگر استفاده کنید. هرچند، برای شفافیت و نگهداری بهتر از کدها، شما باید از انجام این کار بپرهیزید.
