عملکرد زمان جاوااسکریپت

عملکرد زمان جاوااسکریپت

دسته بندی : آموزش Javascript سطح مقاله : متوسط زمان مطالعه : 6 دقیقه آخرین بروز رسانی: 19 اسفند 1399

عملکرد زمان جاوااسکریپت موضوعی است که در این مقاله از سایت دویکس بررسی می‌شود؛ جاوا اسکریپت امکان اجرای کد را در بازه‌های زمانی مشخص فراهم می‌کند، این قابلیت با استفاده از توابع زمان بندی جاوااسکریپت پیاده سازی می‌شود.

رایج ترین توابع زمانبندی در جاوااسکریپت

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

setTimeout در جاوا اسکریپت

تابع setTimeout یکی از توابع مهم جاوا اسکریپت است که برای تعیین تاخیر در اجرای یک تابع یا کد مشخص استفاده می‌شود؛ این تابع به شما این امکان را می‌دهد که یک تابع را پس از یک بازه زمانی خاص اجرا کنید.

دستور نوشتن این تابع به صورت زیر است:

setTimeout(function, delay);

پارامترهای تابع setTimeout :

  • function: تابعی که می‌خواهید پس از تاخیر اجرا شود.
  • delay: مدت زمان تاخیر برحسب میلی‌ ثانیه.

به مثال زیر توجه کنید:

// تعریف تابعی که پس از 2000 میلی‌ ثانیه (یا 2 ثانیه) اجرا می‌شود
function myFunction() {
    console.log("تابع اجرا شد!");
}

// تعیین تاخیر با استفاده از setTimeout
setTimeout(myFunction, 2000);

در این مثال، myFunction پس از 2 ثانیه اجرا می‌شود، این تابع به طور کلی برای اجرای کد یا توابع بعد از مدت زمان مشخص، مثلاً برای اجرای انیمیشن، درخواست به سرور و یا هر کار دیگری که نیاز به تاخیر دارد استفاده می‌شود.

تابع clearTimeOut

تابع clearTimeout یک تابع برای لغو یک زمان بندی (timeout) است که با تابع setTimeout تعیین شده باشد؛ این تابع به شما این امکان را می‌دهد که اجرای تاخیر زمانی را کنسل کنید و تابع مورد نظر اجرا نشود.

دستور نوشتن این تابع به صورت زیر است:

clearTimeout(timeoutID);

پارامترهای تابع clearTimeout :

  • timeoutID: شناسه تایم‌ اوت که با فراخوانی setTimeout به دست آمده است.

به مثال زیر توجه کنید:

// تعریف تابعی که پس از 2000 میلی‌ثانیه اجرا می‌شود
function myFunction() {
    console.log("تابع اجرا شد!");
}

// تنظیم تایم‌اوت با استفاده از setTimeout
var timeoutID = setTimeout(myFunction, 2000);

// لغو تایم‌اوت با استفاده از clearTimeout
clearTimeout(timeoutID);

در این مثال، تابع myFunction پس از 2 ثانیه اجرا می‌شود اما با فراخوانی clearTimeout تایم‌ اوت لغو می‌شود و تابع myFunction اجرا نمی‌شود؛ این تابع برای زمانی که نیازی به اجرای تاخیر زمانی نداشته باشید و می‌خواهید آن را لغو کنید مورد استفاده قرار می‌گیرد.

setInterval در جاوااسکریپت

تابع setInterval در جاوااسکریپت برای اجرای یک تابع یا قطعه کد به صورت دوره‌ای و تکراری در بازه‌های زمانی مشخص مورد استفاده قرار می‌گیرد؛ این تابع باعث اجرای مکرر تابع مشخص شده می‌شود و این کار تا زمانی که تابع clearInterval فراخوانی نشود ادامه پیدا می‌کند.

دستور نوشتن این تابع به صورت زیر است:

setInterval(function, delay);

پارامترهای تابع setInterval :

  • function: تابع یا قطعه کدی که می‌خواهید در هر بازه‌ی زمانی اجرا شود.
  • delay: مدت زمان (برحسب میلی‌ ثانیه) بین هر اجرای تابع.

به مثال زیر توجه کنید:

// تعریف تابعی که هر 2000 میلی‌ ثانیه اجرا می‌شود
function myFunction() {
    console.log("تابع اجرا شد!");
}

// تنظیم تایمر تکرار با setInterval
var intervalID = setInterval(myFunction, 2000);

در این مثال، تابع myFunction هر 2 ثانیه یک بار اجرا می‌شود؛ برای لغو تایمر تکرار و جلوگیری از ادامه تکرار تابع، می‌توانید از تابع clearInterval استفاده کنید:

// لغو تایمر تکرار با clearInterval پس از 10 ثانیه
setTimeout(function() {
    clearInterval(intervalID);
    console.log("تایمر تکرار لغو شد!");
}, 10000);

در این مثال، تایمر تکرار پس از 10 ثانیه لغو می‌شود و پیام مربوطه نمایش داده می‌شود.

تابع clearInterval

همانطور که گفتیم؛ تابع clearInterval یک تابع از جاوا اسکریپت است که برای لغو تکرار اجرای یک تابع یا قطعه کد که با استفاده از تابع setInterval نوشته شده استفاده می‌شود، این تابع باعث متوقف شدن تکرار تابع مورد نظر می‌شود.

دستور نوشتن این تابع به صورت زیر است:

clearInterval(intervalID);

پارامترهای تابع clearInterval :

  • intervalID: شناسه تایمر تکراری که با فراخوانی setInterval به دست آمده است.

به مثال زیر توجه کنید:

// تعریف تابعی که هر 2000 میلی‌ثانیه اجرا می‌شود
function myFunction() {
    console.log("تابع اجرا شد!");
}

// تنظیم تایمر تکرار با setInterval
var intervalID = setInterval(myFunction, 2000);

// لغو تایمر تکرار با clearInterval پس از 10 ثانیه
setTimeout(function() {
    clearInterval(intervalID);
    console.log("تایمر تکرار لغو شد!");
}, 10000);

در این مثال، تایمر تکرار با setInterval تعیین شده و پس از 10 ثانیه با استفاده از clearInterval لغو می‌شود، این روش برای جلوگیری از ادامه تکرار تابع و اتمام یک فرآیند تکراری در زمان‌های مشخص استفاده می‌شود.

نکات عملکرد زمان جاوااسکریپت

در حین استفاده از توابع زمانبندی جاوااسکریپت مانند setTimeout و setInterval برخی نکات و توصیه‌ها می‌توانند مفید باشند:

  1. استفاده متناسب از تاخیر (Delay):
    مطمئن شوید که مقدار تاخیر تعیین شده در setTimeout و setInterval مناسب و بهینه است، انتخاب تاخیر‌های بیش از حد یا کمتر از حد ممکن است تأثیر مستقیمی بر عملکرد برنامه شما داشته باشد.
  2. مدیریت منابع:
    در صورت استفاده مداوم از setInterval با دوره‌های زمانی کوتاه، مطمئن شوید که منابع سیستم به بهینه‌ترین حالت ممکن مورد استفاده قرار می‌گیرند، استفاده از clearInterval برای متوقف کردن تکرار بسیار حائز اهمیت است.
  3. بررسی اندازه تابع:
    اگر تابعی که به setTimeout یا setInterval داده می‌شود، زمان اجرای طولانی دارد، ممکن است تاخیر در اجرای توابع بعدی ایجاد شود، از بهینه‌سازی کدها و کاهش زمان اجرای توابع استفاده کنید.
  4. مدیریت خطا:
    بررسی و مدیریت خطاها در توابعی که با setTimeout یا setInterval فراخوانی می‌شوند اهمیت دارد، این اقدام باعث جلوگیری از توقف ناگهانی یا نقص در اجرا می‌شود.
  5. استفاده از requestAnimationFrame:
    برای انیمیشن‌ها و تغییرات گرافیکی ممکن است requestAnimationFrame گزینه بهتری از setInterval باشد زیرا با حالت بهینه‌تری با مرورگر و سیستم عامل هماهنگ می‌شود.
  6. توجه به مسائل امنیتی:
    در برنامه‌نویسی وب، باید مواظب ترتیب اجرای کدها باشید تا مسائل امنیتی ایجاد نشود، استفاده از setTimeout و setInterval به دقت و با درنظر گرفتن امنیت مهم است.

مقاله عملکرد زمان جاوااسکریپت و معرفی توابع زمانبندی جاوااسکریپت را در اینجا به اتمام می‌رسانیم، اگر درباره توابع دیگر جاوااسکریپت سئوالی دارید از مقالات آموزش Javascript آکادمی دویکس استفاده کنید.

این مقاله چقدر براتون مفید بود؟

میانگین رتبه : 5/5 - تعداد رای : 1