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

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

مفاهیم پیشرفته در کلاس‌ها و وراثت (Super, Extends) در جاوا اسکریپت: راهنمای کامل و مثال‌ها
29م مهر 1403

مفاهیم پیشرفته در کلاس‌ها و وراثت (Super, Extends) در جاوا اسکریپت: راهنمای کامل و مثال‌ها

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

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

مطالعه بیشتر
آموزش کامل کار با آرایه‌ها و اشیاء در جاوا اسکریپت: ایجاد، دستکاری و پیمایش
2م شهریور 1403

آموزش کامل کار با آرایه‌ها و اشیاء در جاوا اسکریپت: ایجاد، دستکاری و پیمایش

مطالعه بیشتر
آموزش اصول کار با WebSockets و ارتباطات بلادرنگ در وب: راهنمای کامل
5م آبان 1403

آموزش اصول کار با WebSockets و ارتباطات بلادرنگ در وب: راهنمای کامل

مطالعه بیشتر
آموزش کار با flex-grow، flex-shrink و flex-basis در CSS Flexbox: مدیریت اندازه و فضای عناصر
11م آبان 1403

آموزش کار با flex-grow، flex-shrink و flex-basis در CSS Flexbox: مدیریت اندازه و فضای عناصر

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

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

مطالعه بیشتر
آموزش ارتباط با سرور و ارسال درخواست‌های HTTP با Fetch API در جاوا اسکریپت: راهنمای جامع با مثال‌ها
1م آبان 1403

آموزش ارتباط با سرور و ارسال درخواست‌های HTTP با Fetch API در جاوا اسکریپت: راهنمای جامع با مثال‌ها

مطالعه بیشتر
معرفی Vue.js و ویژگی‌های کلیدی آن: فریمورک مدرن برای توسعه وب تعاملی
28م شهریور 1402

معرفی Vue.js و ویژگی‌های کلیدی آن: فریمورک مدرن برای توسعه وب تعاملی

مطالعه بیشتر
آموزش مدیریت Box Model و ترکیب اجزای آن با CSS: کنترل دقیق فاصله‌ها و ابعاد عناصر
5م شهریور 1402

آموزش مدیریت Box Model و ترکیب اجزای آن با CSS: کنترل دقیق فاصله‌ها و ابعاد عناصر

مطالعه بیشتر
درک Props و انتقال داده‌ها بین کامپوننت‌ها در Vue.js | آموزش کاربردی
24م آذر 1404

درک Props و انتقال داده‌ها بین کامپوننت‌ها در Vue.js | آموزش کاربردی

مطالعه بیشتر
کار با فیلترهای CSS: آموزش استفاده از blur، brightness و contrast برای افکت‌های تصویری جذاب
11م آبان 1403

کار با فیلترهای CSS: آموزش استفاده از blur، brightness و contrast برای افکت‌های تصویری جذاب

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

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

مطالعه بیشتر

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