در برنامهنویسی جاوا اسکریپت، مدیریت زمان و تاخیرها برای اجرای توابع در زمانهای مشخص اهمیت زیادی دارد. دو تابع مفید برای این کار، setTimeout و setInterval هستند. این توابع به شما این امکان را میدهند که عملیات را به تأخیر بیندازید یا به طور مداوم در فواصل زمانی مشخص اجرا کنید. در این مقاله، به بررسی نحوه استفاده و کاربردهای این توابع خواهیم پرداخت.
تابع setTimeout برای اجرای یک تابع پس از یک تأخیر مشخص استفاده میشود. این تابع فقط یک بار اجرا میشود.
ساختار کلی setTimeout:
setTimeout(callback, delay, [arg1, arg2, ...]);
callback: تابعی که باید اجرا شود.
delay: مدت زمان تأخیر به میلیثانیه (مثلاً 1000 میلیثانیه برابر با 1 ثانیه).
[arg1, arg2, ...]: آرگومانهای اختیاری که به تابع callback منتقل میشود.
مثال استفاده از setTimeout:
console.log("Start");
setTimeout(() => {
console.log("This message appears after 2 seconds");
}, 2000); // 2000 میلیثانیه = 2 ثانیه
console.log("End");
در این مثال:
"Start" و "End" به ترتیب چاپ میشوند.
پیام "This message appears after 2 seconds" پس از 2 ثانیه چاپ میشود.
تابع setInterval برای اجرای یک تابع به طور مداوم در فواصل زمانی مشخص استفاده میشود. این تابع تا زمانی که با clearInterval متوقف نشود، به طور مداوم اجرا میشود.
ساختار کلی setInterval:
setInterval(callback, interval, [arg1, arg2, ...]);
callback: تابعی که باید اجرا شود.
interval: فاصله زمانی بین هر بار اجرای تابع به میلیثانیه.
[arg1, arg2, ...]: آرگومانهای اختیاری که به تابع callback منتقل میشود.
مثال استفاده از setInterval:
let count = 0;
const intervalId = setInterval(() => {
count += 1;
console.log(`Interval message ${count}`);
if (count === 5) {
clearInterval(intervalId); // متوقف کردن تکرار پس از 5 بار اجرا
}
}, 1000); // 1000 میلیثانیه = 1 ثانیه
در این مثال:
تابع هر 1 ثانیه اجرا میشود و شمارش میکند.
پس از 5 بار اجرا، با استفاده از clearInterval تکرار متوقف میشود.
برای جلوگیری از اجرای یک تابع با استفاده از setTimeout یا setInterval، میتوانید از clearTimeout و clearInterval استفاده کنید.
مثال استفاده از clearTimeout:
const timeoutId = setTimeout(() => {
console.log("This message will not appear");
}, 5000); // 5000 میلیثانیه = 5 ثانیه
clearTimeout(timeoutId); // متوقف کردن تابع
مثال استفاده از clearInterval:
const intervalId = setInterval(() => {
console.log("This message will be displayed every second");
}, 1000);
setTimeout(() => {
clearInterval(intervalId); // متوقف کردن تابع بعد از 5 ثانیه
console.log("Interval cleared");
}, 5000); // 5000 میلیثانیه = 5 ثانیه
برای تأخیرهای کوتاه و غیرهماهنگ، setTimeout مفید است. به عنوان مثال، برای ارائه پاسخهای غیرهمزمان در وب اپلیکیشنها یا شبیهسازی تأخیر در پردازش.
مثال:
function fetchData() {
console.log("Fetching data...");
setTimeout(() => {
console.log("Data fetched");
}, 1000);
}
fetchData();
برای وظایف مداوم مانند بهروزرسانی نمایشگر یا اجرای عملیات به طور دورهای، setInterval مناسب است. مطمئن شوید که برای جلوگیری از مشکلات عملکردی یا نشت حافظه، تکرارها را به موقع متوقف کنید.
مثال:
function updateClock() {
const now = new Date();
console.log(now.toLocaleTimeString());
}
const clockInterval = setInterval(updateClock, 1000);
// توقف بعد از 10 ثانیه
setTimeout(() => clearInterval(clockInterval), 10000);
توجه داشته باشید که setTimeout و setInterval به دقت میلیثانیه عمل نمیکنند. زمانبندی ممکن است به دلیل تأخیرهای پردازش یا سایر عوامل سیستم تحت تأثیر قرار گیرد.
توابع setTimeout و setInterval ابزارهای قدرتمندی برای مدیریت زمان و اجرای توابع در جاوا اسکریپت هستند. setTimeout به شما این امکان را میدهد که توابع را پس از یک تأخیر مشخص اجرا کنید، در حالی که setInterval برای اجرای مداوم توابع در فواصل زمانی مشخص استفاده میشود. با درک و استفاده صحیح از این توابع، میتوانید برنامههای پیچیدهتری بنویسید که به راحتی با زمان و رویدادهای ناهمزمان تعامل داشته باشند.
نظری یافت نشد
آموزش اصول کار با WebSockets و ارتباطات بلادرنگ در وب: راهنمای کامل
5م آبان 1403
مطالعه بیشتر
چگونه یک فوتر چسبان در CSS بسازیم: آموزش ساخت فوتر ثابت و همیشگی
2م شهریور 1403
مطالعه بیشتر
آموزش ایجاد Transitions و انیمیشنهای صفحه بارگذاری (Loader) در CSS: طراحی لودرهای جذاب
16م آبان 1403
مطالعه بیشتر
معرفی جاوا اسکریپت و نحوه استفاده از آن برای توسعه وب تعاملی: راهنمای جامع
27م شهریور 1402
مطالعه بیشتر
آموزش کامل کنترل جریان و استفاده از if و else در جاوا اسکریپت: راهنمای جامع برای مبتدیان
2م بهمن 1402
مطالعه بیشتر
مفهوم متغیرها و انواع داده در جاوا اسکریپت: راهنمای جامع برای مبتدیان
28م شهریور 1402
مطالعه بیشتر
آموزش اصول طراحی الگوهای برنامهنویسی (Design Patterns) در جاوا اسکریپت: راهنمای جامع با مثالها
4م آبان 1403
مطالعه بیشتر
آموزش تغییر المانهای DOM: ویرایش متن، سبکها و کلاسها در جاوا اسکریپت - راهنمای کامل با مثالها
2م آبان 1403
مطالعه بیشتر
آموزش استفاده از تگهای تصویری در HTML: نمایش و مدیریت تصاویر در صفحات وب
29م مرداد 1402
مطالعه بیشتر
آموزش استفاده از تگهای خاص HTML: تگهای کاربردی برای طراحی وبسایت
22م مرداد 1402
مطالعه بیشتر
آموزش موقعیتبندی المانها با استفاده از position در CSS: نحوه استفاده از absolute، relative و fixed
5م شهریور 1402
مطالعه بیشتر
استفاده از visibility و opacity در CSS برای مخفیسازی عناصر: راهنمای کامل و کاربردی
11م آبان 1403
مطالعه بیشتر
تمامی حقوق معتلق به ناشر سایت است و کپی از آن پیگرد قانونی دارد