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

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

آموزش استفاده از تگ‌های تصویری در HTML: نمایش و مدیریت تصاویر در صفحات وب
29م مرداد 1402

آموزش استفاده از تگ‌های تصویری در HTML: نمایش و مدیریت تصاویر در صفحات وب

مطالعه بیشتر
تفاوت PHP با HTML، CSS و JavaScript؛ راهنمای جامع و ساده برای مبتدیان
21م خرداد 1405

تفاوت PHP با HTML، CSS و JavaScript؛ راهنمای جامع و ساده برای مبتدیان

مطالعه بیشتر
استفاده از calc در CSS: محاسبات پویا برای طراحی‌های منعطف
12م آبان 1403

استفاده از calc در CSS: محاسبات پویا برای طراحی‌های منعطف

مطالعه بیشتر
مفهوم متغیرها و انواع داده در جاوا اسکریپت: راهنمای جامع برای مبتدیان
28م شهریور 1402

مفهوم متغیرها و انواع داده در جاوا اسکریپت: راهنمای جامع برای مبتدیان

مطالعه بیشتر
آموزش ترانزیشن‌ها و انیمیشن‌های نرم با CSS: ایجاد افکت‌های پویا و واکنش‌گرا
10م شهریور 1402

آموزش ترانزیشن‌ها و انیمیشن‌های نرم با CSS: ایجاد افکت‌های پویا و واکنش‌گرا

مطالعه بیشتر
آموزش جامع انواع داده‌ها در PHP (بخش اول: String, Integer, Float, Boolean)
24م خرداد 1405

آموزش جامع انواع داده‌ها در PHP (بخش اول: String, Integer, Float, Boolean)

مطالعه بیشتر
راهنمای جامع قوانین نام‌گذاری متغیرها در PHP بر اساس استاندارد گوگل
24م خرداد 1405

راهنمای جامع قوانین نام‌گذاری متغیرها در PHP بر اساس استاندارد گوگل

مطالعه بیشتر
عملگرها و عبارات محاسباتی در جاوا اسکریپت: نحوه استفاده و کاربردهای مختلف
28م شهریور 1402

عملگرها و عبارات محاسباتی در جاوا اسکریپت: نحوه استفاده و کاربردهای مختلف

مطالعه بیشتر
آموزش جامع و گام‌به‌گام حلقه for در PHP + مثال‌های کاربردی
4م تیر 1405

آموزش جامع و گام‌به‌گام حلقه for در PHP + مثال‌های کاربردی

مطالعه بیشتر
آموزش کامل توابع سازنده (Constructors) و پروتوتایپ‌ها (Prototypes) در جاوا اسکریپت: راهنمای جامع
28م مهر 1403

آموزش کامل توابع سازنده (Constructors) و پروتوتایپ‌ها (Prototypes) در جاوا اسکریپت: راهنمای جامع

مطالعه بیشتر
کار با تصاویر SVG در CSS: کنترل استایل و استفاده از گرافیک‌های مقیاس‌پذیر
16م آبان 1403

کار با تصاویر SVG در CSS: کنترل استایل و استفاده از گرافیک‌های مقیاس‌پذیر

مطالعه بیشتر
آموزش جامع و استاندارد کار با آرایه‌ها در PHP (راهنمای گوگل)
24م خرداد 1405

آموزش جامع و استاندارد کار با آرایه‌ها در PHP (راهنمای گوگل)

مطالعه بیشتر

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