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

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

1403/07/29 20:46 محراب حسن زاده
استفاده از 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 برای اجرای مداوم توابع در فواصل زمانی مشخص استفاده می‌شود. با درک و استفاده صحیح از این توابع، می‌توانید برنامه‌های پیچیده‌تری بنویسید که به راحتی با زمان و رویدادهای ناهم‌زمان تعامل داشته باشند.

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

آشنایی با Vue CLI و ایجاد پروژه‌های پیشرفته در Vue.js | راهنمای کامل
1404/09/29 21:09

آشنایی با Vue CLI و ایجاد پروژه‌های پیشرفته در Vue.js | راهنمای کامل

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

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

مطالعه بیشتر
آموزش کامل حلقه foreach در PHP برای پیمایش آرایه‌ها (به زبان ساده)
1405/04/16 00:37

آموزش کامل حلقه foreach در PHP برای پیمایش آرایه‌ها (به زبان ساده)

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

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

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

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

مطالعه بیشتر
آموزش استفاده از cubic-bezier در CSS برای انیمیشن‌های سفارشی و حرفه‌ای
1403/08/12 20:28

آموزش استفاده از cubic-bezier در CSS برای انیمیشن‌های سفارشی و حرفه‌ای

مطالعه بیشتر
آموزش استفاده از object-fit و object-position در CSS: تنظیم و قرارگیری تصاویر به‌صورت دقیق
1403/08/12 19:51

آموزش استفاده از object-fit و object-position در CSS: تنظیم و قرارگیری تصاویر به‌صورت دقیق

مطالعه بیشتر
راهنمای کامل جداول HTML: آموزش ساخت و بهینه‌سازی سئو
1402/05/21 23:26

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

مطالعه بیشتر
آموزش جامع توابع داخلی و پرکاربرد PHP + مثال‌های عملی
1405/04/16 01:18

آموزش جامع توابع داخلی و پرکاربرد PHP + مثال‌های عملی

مطالعه بیشتر
آموزش Prepared Statement در PHP: امن‌سازی دیتابیس در برابر SQL Injection
1405/05/13 21:17

آموزش Prepared Statement در PHP: امن‌سازی دیتابیس در برابر SQL Injection

مطالعه بیشتر
مدیریت ترتیب نمایش با z-index در CSS: آموزش کامل و کاربردی
1403/08/11 21:28

مدیریت ترتیب نمایش با z-index در CSS: آموزش کامل و کاربردی

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

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

مطالعه بیشتر

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