در جاوااسکریپت، زمانی که یک event راهاندازی میشود و یا صفحهای لود میگردد، تابع تایمر از اجرای کد ممانعت به عمل میآورد. این کار باعث میشود تا کنترل بیشتری بر روی زمانبندی فعالیتهای برنامه خود داشته باشیم و بتوانیم با ایجاد تعاملها یا انیمیشنهای بیشتر، تجربه کاربری را بهبود ببخشیم. در این مقاله قصد داریم تا نحوه استفاده از توابع تایمر و تنظیم آنها در جاوااسکریپت را بررسی کنیم.
راههای مختلفی برای تنظیم تابع تایمر در جاوااسکریپت وجود دارد. به عنوان مثال میتوانیم برای انجام این کار از توابع setTimeout
، setInterval
، clearTimeout
و setImmediate
استفاده کنیم.
setTimeout
و setInterval
تابع setTimeout
یک عبارت را بعد از یک تاخیر مشخص بر حسب میلی ثانیه اجرا میکند، اما تابع setInterval
یک عبارت را بعد از یک فاصله زمانی مشخص بر حسب میلی ثانیه اجرا مینماید.
زمانی که میخواهیم بلاک کد را با یک تاخیر مشخص اجرا کنیم، میتوانیم از تابع setTimeout()
استفاده کنیم.
تابع setTimeout با setTimeout()
نشان داده میشود. در ادامه مثالی از نحوه استفاده از آن را داریم:
// Execute a function after 3 seconds const timeoutId = setTimeout(() => { console.log('Timeout executed after 3 seconds'); }, ۳۰۰۰);
بلاک کد بالا روش استفاده از سینتکس setTimeout
برای اجرای یک تابع پس از ۳ ثانیه را نشان میدهد. نام متغیر timeoutId
است که اجرای setTimeout را در خود ذخیره میکند. زمان این تابع نیز بر حسب میلی ثانیه تنظیم میشود و مقدار آن ۳۰۰۰ میلی ثانیه (۳ ثانیه) است.
زمانی که میخواهیم یک بلاک کد را به طور مکرر اما در فواصل زمانی مشخص اجرا کنیم، میتوانیم از تابع setInterval()
استفاده نماییم.
تابع setInterval را داریم که با setInterval()
نشان داده میشود. در ادامه مثالی از نحوه استفاده از آن را مشاهده میکنیم:
// Execute a function every 1 second const intervalId = setInterval(() => { console.log('Interval executed every 1 second'); }, ۱۰۰۰);
بلاک کد بالا نحوه استفاده از سینتکس setInterval
برای اجرای یک تابع پس از ۱ ثانیه را نشان میدهد. نام متغیر intervalId
است که اجرای setInterval را ذخیره میکند. همچنین زمان این تابع نیز بر حسب میلی ثانیه تنظیم میشود و مقدار آن ۱۰۰۰ میلی ثانیه (۱ ثانیه) میباشد.
clearTimeout
و clearInterval
تابع clearTimeout
یک مهلت زمانی را که قبلاً با تابع setTimeout
برنامهریزی شده است، کنسل میکند. اما تابع clearInterval
فاصلهای را که قبلاً با setInterval
تنظیم شده است را لغو مینماید.
تابع clearTimeout با clearTimeout();
نشان داده میشود. این تابع آرگومانی را میپذیرد که تابع setTimeout
را ذخیره میکند.
در ادامه مثالی از نحوه کار آن تابع را داریم:
const timeoutId = setTimeout(() => { console.log('Timeout executed after 3 seconds'); }, ۳۰۰۰); clearTimeout(timeoutId); console.log('Timeout cleared');
در این مثال، تابع clearTimeout
متغیر timeoutID
را که تابع setTimeout
را ذخیره کرده است، به عنوان آرگومان میگیرد و تابع را پاک میکند.
تابع clearInterval با clearInterval();
نشان داده میشود. این تابع آرگومانی را میپذیرد که تابع setInterval
را در بلاک تابع setTimeout
ذخیره میکند.
در ادامه مثالی از نحوه کار آن تابع را مشاهده میکنیم:
const intervalId = setInterval(() => { console.log('Interval executed every 1 second'); }, ۱۰۰۰); setTimeout(() => { clearInterval(intervalId); console.log('Interval cleared. Function will no longer execute.'); }, ۵۰۰۰);
بلاک کد بالا، تابع setTimeout
را نشان میدهد. تابع clearInterval
به بلاک کد منتقل میشود، آرگومان intervalId
ارسال میگردد و سپس تابع اجرا میشود.
یک تابع تایمر دیگر، تابع setImmediate
است که پس از اتمام اجرای بلاک کد فعلی، یک تابع را به صورت asynchronous در اسرع وقت اجرا میکند. اما از آن جایی که این تابع به صورت سراسری در همه مرورگرها پشتیبانی نمیشود، به ندرت مورد استفاده قرار میگیرد.
در این مقاله سعی کردیم تا انواع تابع تایمر در جاوااسکریپت را با هم بررسی کنیم. این موضوع مهم است که بدانیم چگونه و چه زمانی باید از این توابع در کد جاوااسکریپتی خود استفاده کنیم.