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

در این آموزش، نحوه استفاده از عملکردهای تایمر تنظیم شده را خواهید آموخت.

نحوه تنظیم عملکرد تایمر

راه های مختلفی برای تنظیم عملکرد تایمر وجود دارد، مانند توابع 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 function با 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 است که پس از اتمام اجرای بلوک کد فعلی، یک تابع را به صورت ناهمزمان در اسرع وقت اجرا می کند. اما به طور جهانی در همه مرورگرها پشتیبانی نمی شود، پس به ندرت از آن استفاده می شود.

بسته بندی

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

اگر سوالی دارید، می توانید در توییتر با من تماس بگیرید 💙.

خبرکاو