در جاوااسکریپت، زمانی که یک 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');
}, 3000);

بلاک کد بالا روش استفاده از سینتکس setTimeout برای اجرای یک تابع پس از 3 ثانیه را نشان می‌دهد. نام متغیر timeoutId است که اجرای setTimeout را در خود ذخیره می‌کند. زمان این تابع نیز بر حسب میلی ثانیه تنظیم می‌شود و مقدار آن 3000 میلی ثانیه (3 ثانیه) است.

زمانی که می‌خواهیم یک بلاک کد را به طور مکرر اما در فواصل زمانی مشخص اجرا کنیم، می‌توانیم از تابع setInterval() استفاده نماییم.

تابع setInterval را داریم که با setInterval() نشان داده می‌شود. در ادامه مثالی از نحوه استفاده از آن را مشاهده می‌کنیم:

// Execute a function every 1 second
const intervalId = setInterval(() => {
    console.log('Interval executed every 1 second');
}, 1000);

بلاک کد بالا نحوه استفاده از سینتکس setInterval برای اجرای یک تابع پس از 1 ثانیه را نشان می‌دهد. نام متغیر intervalId است که اجرای setInterval را ذخیره می‌کند. همچنین زمان این تابع نیز بر حسب میلی ثانیه تنظیم می‌شود و مقدار آن 1000 میلی ثانیه (1 ثانیه) می‌باشد.

روش استفاده از clearTimeout و clearInterval

تابع clearTimeout یک مهلت زمانی را که قبلاً با تابع setTimeout برنامه‌ریزی شده است، کنسل می‌کند. اما تابع clearInterval فاصله‌ای را که قبلاً با ⁠setInterval تنظیم شده است را لغو می‌نماید.

تابع clearTimeout با clearTimeout(); نشان داده می‌شود. این تابع آرگومانی را می‌پذیرد که تابع setTimeout را ذخیره می‌کند.

در ادامه مثالی از نحوه کار آن تابع را داریم:

const timeoutId = setTimeout(() => {
    console.log('Timeout executed after 3 seconds');
}, 3000);

clearTimeout(timeoutId);
console.log('Timeout cleared');

در این مثال، تابع clearTimeout متغیر timeoutID را که تابع setTimeout را ذخیره کرده است، به عنوان آرگومان می‌گیرد و تابع را پاک می‌کند.

تابع clearInterval با clearInterval(); نشان داده می‌شود. این تابع آرگومانی را می‌پذیرد که تابع setInterval را در بلاک تابع setTimeout ذخیره می‌کند.

در ادامه مثالی از نحوه کار آن تابع را مشاهده می‌کنیم:

const intervalId = setInterval(() => {
    console.log('Interval executed every 1 second');
}, 1000);

setTimeout(() => {
    clearInterval(intervalId);
    console.log('Interval cleared. Function will no longer execute.');
}, 5000);

بلاک کد بالا، تابع setTimeout را نشان می‌دهد. تابع clearInterval به بلاک کد منتقل می‌شود، آرگومان intervalId ارسال می‌گردد و سپس تابع اجرا می‌شود.

یک تابع تایمر دیگر، تابع setImmediate است که پس از اتمام اجرای بلاک کد فعلی، یک تابع را به صورت asynchronous در اسرع وقت اجرا می‌کند. اما از آن جایی که این تابع به صورت سراسری در همه مرورگرها پشتیبانی نمی‌شود، به ندرت مورد استفاده قرار می‌گیرد.

جمع‌بندی

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