شیء navigator و کنترل زمان با تایمرها

در ادامه‌ی آشنایی با لایه‌ی مرورگر، دو ابزار دیگر بسیار پرکاربرد بررسی می‌شوند: شیء navigator که اطلاعاتی درباره‌ی مرورگر و محیط اجرای کاربر در اختیار می‌گذارد، و توابع تایمر که امکان اجرای کد را با تأخیر یا به‌صورت تکرارشونده فراهم می‌کنند. این توابع پایه‌ی بسیاری از قابلیت‌های رایج مثل نمایش پیام‌های موقت، اسلایدرها و درخواست‌های دوره‌ای به سرور هستند.

شیء navigator

شیء window.navigator اطلاعاتی درباره‌ی مرورگر، سیستم‌عامل و وضعیت اتصال اینترنت کاربر در اختیار قرار می‌دهد:

console.log(navigator.userAgent); // رشته‌ی شناسایی مرورگر و سیستم‌عامل
console.log(navigator.language);  // زبان پیش‌فرض مرورگر، مثلاً "fa-IR"
console.log(navigator.onLine);    // true یا false بسته به وضعیت اتصال اینترنت

از میان این ویژگی‌ها، navigator.onLine کاربرد عملی بیشتری در پروژه‌های واقعی دارد؛ چون امکان می‌دهد پیش از ارسال درخواست به سرور، وضعیت اتصال کاربر بررسی شود. در مقابل، userAgent به دلیل تفاوت‌های زیاد میان مرورگرها و قابلیت تغییر توسط کاربر، امروزه کمتر برای تشخیص دقیق نوع مرورگر توصیه می‌شود.

اجرای کد با تأخیر: setTimeout

تابع setTimeout یک تابع را پس از گذشت زمان مشخص، فقط یک‌بار اجرا می‌کند:

اجرای کد با تأخیر
خروجی کنسول اینجا نمایش داده می‌شود...

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

اجرای تکرارشونده: setInterval

تابع setInterval مشابه setTimeout عمل می‌کند، با این تفاوت که تابع داده‌شده را به‌طور مداوم و با فاصله‌ی زمانی ثابت، تا زمانی که متوقف نشود، اجرا می‌کند:

let count = 0;

const intervalId = setInterval(() => {
  count++;
  console.log(`اجرای شماره ${count}`);
}, 1000);

متوقف کردن تایمرها

هر دو تابع setTimeout و setInterval یک شناسه‌ی عددی برمی‌گردانند که برای لغو اجرای آن‌ها با clearTimeout و clearInterval استفاده می‌شود:

clearTimeout(timerId);   // لغو setTimeout پیش از اجرا
clearInterval(intervalId); // متوقف کردن setInterval در حال اجرا

فراموش‌کردن پاک‌سازی setInterval، یکی از رایج‌ترین منابع نشتی حافظه (memory leak) در برنامه‌های جاوااسکریپت است؛ به‌خصوص وقتی کاربر از صفحه یا کامپوننتی خارج می‌شود اما تایمر همچنان در پس‌زمینه فعال باقی می‌ماند.

جدول مقایسه‌ی setTimeout و setInterval

ویژگی setTimeout setInterval
تعداد اجرا فقط یک‌بار مکرر، تا زمان توقف صریح
تابع لغو clearTimeout clearInterval
کاربرد رایج نمایش موقت پیام، تأخیر در اجرای یک عملیات به‌روزرسانی دوره‌ای، اسلایدر خودکار، ساعت زنده

نکات کلیدی

  • navigator.onLine برای بررسی وضعیت اتصال اینترنت کاربر پیش از ارسال درخواست کاربرد عملی دارد.
  • setTimeout تابع را فقط یک‌بار و پس از تأخیر مشخص اجرا می‌کند و اجرای بقیه‌ی کد را متوقف نمی‌کند.
  • setInterval تابع را به‌طور مکرر و با فاصله‌ی زمانی ثابت اجرا می‌کند، تا زمانی که با clearInterval متوقف شود.
  • عدم پاک‌سازی به‌موقع setInterval یکی از رایج‌ترین دلایل نشتی حافظه در برنامه‌های واقعی است.

جمع‌بندی

شیء navigator دسترسی به اطلاعات محیط اجرای مرورگر را فراهم می‌کند و در کنار آن، توابع setTimeout و setInterval ابزار اصلی برای مدیریت زمان‌بندی اجرای کد در جاوااسکریپت هستند. تفاوت اصلی این دو در تعداد دفعات اجراست: یکی فقط یک‌بار و دیگری به‌طور مکرر عمل می‌کند، و در هر دو حالت، پاک‌سازی به‌موقع تایمر با clearTimeout یا clearInterval برای جلوگیری از رفتارهای ناخواسته ضروری است.