آموزش رایگان جاوا اسکریپت (JavaScript)

استفاده از setTimeout و setInterval در جاوا اسکریپت: آموزش کامل و مثال‌ها

29م مهر 1403 محراب حسن زاده
استفاده از setTimeout و setInterval در جاوا اسکریپت: آموزش کامل و مثال‌ها

در برنامه‌نویسی جاوا اسکریپت، مدیریت زمان و تاخیرها برای اجرای توابع در زمان‌های مشخص اهمیت زیادی دارد. دو تابع مفید برای این کار، setTimeout و setInterval هستند. این توابع به شما این امکان را می‌دهند که عملیات را به تأخیر بیندازید یا به طور مداوم در فواصل زمانی مشخص اجرا کنید. در این مقاله، به بررسی نحوه استفاده و کاربردهای این توابع خواهیم پرداخت.

 

مقدمه‌ای بر setTimeout و setInterval

setTimeout

تابع 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

تابع 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 تکرار متوقف می‌شود.

 

مدیریت توابع و پردازش‌های زمان‌بندی

توقف توابع با clearTimeout و 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 برای تأخیرهای غیرهماهنگ

برای تأخیرهای کوتاه و غیرهماهنگ، setTimeout مفید است. به عنوان مثال، برای ارائه پاسخ‌های غیرهمزمان در وب اپلیکیشن‌ها یا شبیه‌سازی تأخیر در پردازش.

مثال:


function fetchData() {
  console.log("Fetching data...");
  setTimeout(() => {
    console.log("Data fetched");
  }, 1000);
}

fetchData();

 

استفاده از setInterval برای وظایف مداوم

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

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

آموزش کامل ساخت و افزودن تقویم فارسی به Input (کامل و استاندارد)
14م خرداد 1405

آموزش کامل ساخت و افزودن تقویم فارسی به Input (کامل و استاندارد)

مطالعه بیشتر
راهنمای کامل تگ‌های متنی HTML و اصول سئو برای محتوا
18م مرداد 1402

راهنمای کامل تگ‌های متنی HTML و اصول سئو برای محتوا

مطالعه بیشتر
آموزش ایجاد یک پروژه ساده React: شروع کار و ساختاردهی کامپوننت‌ها
28م شهریور 1402

آموزش ایجاد یک پروژه ساده React: شروع کار و ساختاردهی کامپوننت‌ها

مطالعه بیشتر
استفاده از Viewports و Viewport Units در CSS: طراحی واکنش‌گرا با vw، vh، vmin و vmax
16م آبان 1403

استفاده از Viewports و Viewport Units در CSS: طراحی واکنش‌گرا با vw، vh، vmin و vmax

مطالعه بیشتر
تفاوت Callbacks و Promises در جاوا اسکریپت: مقایسه جامع با مثال‌ها
30م مهر 1403

تفاوت Callbacks و Promises در جاوا اسکریپت: مقایسه جامع با مثال‌ها

مطالعه بیشتر
آموزش صفر تا صد ساخت ماشین حساب با جاوا اسکریپت (پروژه محور و کاربردی)
13م خرداد 1405

آموزش صفر تا صد ساخت ماشین حساب با جاوا اسکریپت (پروژه محور و کاربردی)

مطالعه بیشتر
استفاده از visibility و opacity در CSS برای مخفی‌سازی عناصر: راهنمای کامل و کاربردی
11م آبان 1403

استفاده از visibility و opacity در CSS برای مخفی‌سازی عناصر: راهنمای کامل و کاربردی

مطالعه بیشتر
آموزش تکنیک‌های پیشرفته CSS Grid: طراحی ساختارهای پیچیده و واکنش‌گرا
18م شهریور 1402

آموزش تکنیک‌های پیشرفته CSS Grid: طراحی ساختارهای پیچیده و واکنش‌گرا

مطالعه بیشتر
آموزش تگ‌های پیوندی و اتصالی در HTML: ایجاد لینک‌های داخلی و خارجی
29م مرداد 1402

آموزش تگ‌های پیوندی و اتصالی در HTML: ایجاد لینک‌های داخلی و خارجی

مطالعه بیشتر
استفاده از clip-path در CSS برای برش‌های زیبا و جذاب: راهنمای کامل
16م آبان 1403

استفاده از clip-path در CSS برای برش‌های زیبا و جذاب: راهنمای کامل

مطالعه بیشتر
آموزش دسترسی به المان‌های HTML با استفاده از جاوا اسکریپت: راهنمای کامل با مثال‌ها
2م آبان 1403

آموزش دسترسی به المان‌های HTML با استفاده از جاوا اسکریپت: راهنمای کامل با مثال‌ها

مطالعه بیشتر
آموزش گام به گام طراحی مگا منو (Mega Menu) مدرن با CSS و HTML
13م خرداد 1405

آموزش گام به گام طراحی مگا منو (Mega Menu) مدرن با CSS و HTML

مطالعه بیشتر

تمامی حقوق معتلق به ناشر سایت است و کپی از آن پیگرد قانونی دارد