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

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

آموزش ایجاد و حذف المان‌های DOM به صورت داینامیک با جاوا اسکریپت: راهنمای جامع و کاربردی
2م آبان 1403

آموزش ایجاد و حذف المان‌های DOM به صورت داینامیک با جاوا اسکریپت: راهنمای جامع و کاربردی

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

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

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

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

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

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

مطالعه بیشتر
آموزش استفاده از ماژول‌ها (Modules) در جاوا اسکریپت: آشنایی با ES6 Modules - راهنمای کامل
5م آبان 1403

آموزش استفاده از ماژول‌ها (Modules) در جاوا اسکریپت: آشنایی با ES6 Modules - راهنمای کامل

مطالعه بیشتر
راهنمای کامل تگ‌های <img> و <a> در HTML: تصاویر و لینک‌ها
21م مرداد 1402

راهنمای کامل تگ‌های <img> و <a> در HTML: تصاویر و لینک‌ها

مطالعه بیشتر
کاربرد تگ‌های meta، title و keywords در سئو: راهنمای جامع بهینه‌سازی وب‌سایت
25م مرداد 1402

کاربرد تگ‌های meta، title و keywords در سئو: راهنمای جامع بهینه‌سازی وب‌سایت

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

آموزش مفاهیم اولیه CSS Grid Layout: طراحی شبکه‌های پیچیده و واکنش‌گرا راهنمای کامل

مطالعه بیشتر
مقدمه‌ای به template و دیتابایندینگ در Vue.js: نحوه مدیریت داده‌ها و رندرینگ پویا
28م شهریور 1402

مقدمه‌ای به template و دیتابایندینگ در Vue.js: نحوه مدیریت داده‌ها و رندرینگ پویا

مطالعه بیشتر
روش‌های کار با Conditional و Loop در Vue.js | آموزش v-if، v-show و v-for
28م آذر 1404

روش‌های کار با Conditional و Loop در Vue.js | آموزش v-if، v-show و v-for

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

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

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

آموزش تغییر المان‌های DOM: ویرایش متن، سبک‌ها و کلاس‌ها در جاوا اسکریپت - راهنمای کامل با مثال‌ها

مطالعه بیشتر

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