Timer در جاوا اسکریپت

به نام خدا با عرض سلام و احترام خدمت شما دوستان عزیز در ادامه آموزش جاوا اسکریت این جلسه قصد داریم به مبحث Timer در جاوا اسکریپت بپردازیم.با ما همراه باشید.

 کار با Timer

Timer تابعی است که ما را قادر می سازد تا یک تابع را در یک زمان خاص اجرا کنیم.با استفاده از تایمر می توانید اجرای کد را به تعویق بیندازید تا دقیقاً در لحظه ای که یک رویداد راه اندازی می شود. یا هنگامی که  صفحه بارگذاری می شود انجام نشود.به عنوان مثال، می توانید با استفاده از تایمر، بنرهای تبلیغاتی وب سایت خود را در فواصل زمانی معین تغییر دهید یا یک ساعت بی درنگ و …نمایش دهید.دو تابع تایمر در جاوا اسکریپت وجود دارد: ()setTimeout و ()setInterval.

بخش زیر نحوه ایجاد تایمر برای به تاخیر انداختن اجرای کد و همچنین نحوه انجام یک یا چند عمل تکراری با استفاده از این توابع در جاوا اسکریپت را به شما نشان می دهد.

اجرای کد پس از تاخیر

تابع ()setTimeout برای اجرای یک تابع یا قطعه کد مشخص شده فقط یک بار پس از یک دوره زمانی خاص استفاده می شود. که سینتکس  آن به صورت  setTimeout(function, milliseconds).می باشد.

این تابع دو پارامتر را می پذیرد: یک تابع،  تابعی که قرار است اجرا شود، و یک پارامتر تاخیر اختیاری، که تعداد میلی ثانیه ها نشان دهنده مدت زمان انتظار قبل از اجرای تابع است (1 ثانیه = 1000 میلی ثانیه). نحوه عملکرد این تابع:

<script>
function myFunction() {
    alert('Hello World!');
}
</script>
 
<button onclick="setTimeout(myFunction, 2000)">Click Me</button>

مثال بالا با کلیک روی دکمه پس از 2 ثانیه یک پیام برای ما نمایش می دهد.

توجه: اگر پارامتر تاخیر حذف شود یا مشخص نشده باشد، مقدار صفر استفاده می شود، به این معنی که تابع مشخص شده “فورا” یا در اسرع وقت اجرا می شود.

اجرای کد در فواصل  زمانی منظم

<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>

توقف اجرای کد یا لغو یک تایمر

هر دو متد ()setTimeout و ()setInterval  یک شناسه منحصر به فرد (یک عدد صحیح مثبت که شناسه تایمر نامیده می شود) را برمی گرداند که تایمر ایجاد شده توسط این متدها را مشخص می کند.

از این شناسه می توان برای غیرفعال کردن یا پاک کردن تایمر و توقف اجرای کد از قبل استفاده کرد. پاک کردن  تایمر را می توان با استفاده از دو تابع زیر انجام داد: ()clearTimeout و ()clearInterval.

تابع ()setTimeout یک سینگل  پارامتر  ، یک ID می گیرد و تایمر ()setTimeout  مرتبط با آن ID را پاک می کند، همانطور که در مثال زیر نشان داده شده است:

<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 به جای یکدیگر استفاده کنید. با این حال، برای وضوح و قابلیت نگهداری کد، باید از انجام این کار خودداری نمایید.

خب دوستان گرامی به پایان بخش Timer در جاوا اسکریپت رسیدیم امیدواریم این بخش نیز مورد توجه شما قرار گیرد.

سایرمقالات

تبدیل نوع داده(Type Conversions)در جاوا اسکریپت

انواع عملگرها در جاوا اسکریپت