تنظیم تابع تایمر در جاوااسکریپت

سودا مجتهدی

آذر 5, 1403

در جاوااسکریپت، زمانی که یک event راه‌اندازی می‌شود و یا صفحه‌ای لود می‌گردد، تابع تایمر از اجرای کد ممانعت به عمل می‌آورد. این کار باعث می‌شود تا کنترل بیشتری بر روی زمان‌بندی فعالیت‌های برنامه خود داشته باشیم و بتوانیم با ایجاد تعامل‌ها یا انیمیشن‌های بیشتر، تجربه کاربری را بهبود ببخشیم. در این مقاله قصد داریم تا نحوه استفاده از توابع تایمر و تنظیم آن‌ها در جاوااسکریپت را بررسی کنیم.

چگونه باید یک تابع تایمر را در جاوااسکریپت تنظیم کنیم؟

راه‌های مختلفی برای تنظیم تابع تایمر در جاوااسکریپت وجود دارد. به عنوان مثال می‌توانیم برای انجام این کار از توابع

setTimeout

setTimeout،

setInterval

setInterval،

clearTimeout

clearTimeout و

setImmediate

setImmediate استفاده کنیم.

روش استفاده از
setTimeout
`setTimeout` و
setInterval
`setInterval`

تابع

setTimeout

setTimeout یک عبارت را بعد از یک تاخیر مشخص بر حسب میلی ثانیه اجرا می‌کند، اما تابع

setInterval

setInterval یک عبارت را بعد از یک فاصله زمانی مشخص بر حسب میلی ثانیه اجرا می‌نماید.

زمانی که می‌خواهیم بلاک کد را با یک تاخیر مشخص اجرا کنیم، می‌توانیم از تابع

setTimeout()

setTimeout() استفاده کنیم.

تابع setTimeout با

setTimeout()

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

// Execute a function after 3 seconds

⁠ const timeoutId = setTimeout(() => {

console.log('Timeout executed after 3 seconds');

}, ۳۰۰۰);

// Execute a function after 3 seconds ⁠ const timeoutId = setTimeout(() => { console.log('Timeout executed after 3 seconds'); }, ۳۰۰۰);

// Execute a function after 3 seconds
⁠ const timeoutId = setTimeout(() => {
    console.log('Timeout executed after 3 seconds');
}, ۳۰۰۰);

بلاک کد بالا روش استفاده از سینتکس

setTimeout

setTimeout برای اجرای یک تابع پس از ۳ ثانیه را نشان می‌دهد. نام متغیر

timeoutId

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

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

setInterval()

setInterval() استفاده نماییم.

تابع setInterval را داریم که با

setInterval()

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

// Execute a function every 1 second

const intervalId = setInterval(() => {

console.log('Interval executed every 1 second');

}, ۱۰۰۰);

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

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

بلاک کد بالا نحوه استفاده از سینتکس

setInterval

setInterval برای اجرای یک تابع پس از ۱ ثانیه را نشان می‌دهد. نام متغیر

intervalId

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

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

تابع

clearTimeout

clearTimeout یک مهلت زمانی را که قبلاً با تابع

setTimeout

setTimeout برنامه‌ریزی شده است، کنسل می‌کند. اما تابع

clearInterval

clearInterval فاصله‌ای را که قبلاً با ⁠

setInterval

setInterval تنظیم شده است را لغو می‌نماید.

تابع clearTimeout با

clearTimeout();

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

setTimeout

setTimeout را ذخیره می‌کند.

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

const timeoutId = setTimeout(() => {

console.log('Timeout executed after 3 seconds');

}, ۳۰۰۰);

clearTimeout(timeoutId);

console.log('Timeout cleared');

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

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

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

در این مثال، تابع

clearTimeout

clearTimeout متغیر

timeoutID

timeoutID را که تابع

setTimeout

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

تابع clearInterval با

clearInterval();

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

setInterval

setInterval را در بلاک تابع

setTimeout

setTimeout ذخیره می‌کند.

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

const intervalId = setInterval(() => {

console.log('Interval executed every 1 second');

}, ۱۰۰۰);

setTimeout(() => {

clearInterval(intervalId);

console.log('Interval cleared. Function will no longer execute.');

}, ۵۰۰۰);

const intervalId = setInterval(() => { console.log('Interval executed every 1 second'); }, ۱۰۰۰); setTimeout(() => { clearInterval(intervalId); console.log('Interval cleared. Function will no longer execute.'); }, ۵۰۰۰);

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

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

بلاک کد بالا، تابع

setTimeout

setTimeout را نشان می‌دهد. تابع

clearInterval

clearInterval به بلاک کد منتقل می‌شود، آرگومان

intervalId

intervalId ارسال می‌گردد و سپس تابع اجرا می‌شود.

یک تابع تایمر دیگر، تابع

setImmediate

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

جمع‌بندی

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

دیدگاه‌ها:

افزودن دیدگاه جدید لغو پاسخ

برای نوشتن دیدگاه باید وارد بشوید.