کاربرد متد setinterval در جاوا اسکریپت

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

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

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

setInterval(function() {
  console.log(“This message will be logged every 2 seconds.”);
}, 2000);

این کد باعث می‌شود که پیام “This message will be logged every 2 seconds.” هر دو ثانیه یک بار در کنسول نمایش داده شود.

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

یکی از کاربردهای متداول setInterval در انیمیشن‌ها و بازی‌های وب است. با استفاده از این متد، می‌توان حرکات مداوم و روانی را در صفحات وب ایجاد کرد. به عنوان مثال، می‌توان تصاویری را به صورت مکرر حرکت داد یا وضعیت‌های مختلف بازی را به روز رسانی کرد. این متد به برنامه‌نویسان اجازه می‌دهد تا با کدنویسی ساده، تاثیرات بصری جذابی را در وب‌سایت‌ها و برنامه‌های خود ایجاد کنند.

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

• intervalIdentifier  یک مقدار عددی است که به طور منحصر به فرد تایمر ایجاد شده را شناسایی می‌کند و توسط متد SetInterval()‎ رابط WindowOrWorkerGlobalScope برگردانده می‌شود. این مقدار همیشه عددی صحیح غیر صفر است و می‌تواند بعداً برای توقف اجرای بازه با استفاده از متد clearInterval()‎  استفاده شود.
• پارامتر نشان دهنده تابعی حاوی کدهایی است که کاربر می‌خواهد به طور مکرر اجرا شوند. به طور پیش‌فرض، این تابع نباید هیچ پارامتری را بپذیرد و نباید هیچ مقداری را برگرداند.
• «زمان تأخیر» (DelayTime) فاصله زمانی برحسب میلی‌ثانیه است (در آن ۱ ثانیه برابر با ۱۰۰۰ میلی‌ثانیه خواهد بود) که زمان بین هر فراخوانی تابع تکراری را مشخص می‌کند.
• از پارامتر «کد» (Code) برای ارسال رشته‌ای استفاده می‌شود که حاوی کدی است که باید هر بار با اتمام زمان تأخیر SetInterval()‎ باید اجرا شود. با این حال، استفاده از پارامتر کد معمولاً به دلایل امنیتی توصیه نمی‌شود.
• در نهایت، می‌توان اختیاری را با قرار دادن آن‌ها پس از پارامتر DelayTime به تابع ارسال کرد.

قطعه کد مثال اول به صورت زیر است:

خروجی این مثال به صورت تصویر زیر است:

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

قطعه کد مثال ٢ به صورت زیر است:

خروجی قطعه کد بالا به صورت تصویری در ادامه آمده است. خروجی در ثانیه ٩ به صورت زیر است.

خروجی در ثانیه ۵ در ادامه ملاحظه می‌شود.

خروجی نهایی پس از اتمام تایمر به صورت زیر خواهد بود.

اگر کاربر روی دکمه توقف آن کلیک کند، شمارش معکوس بالا متوقف خواهد شد.

انتقال پارامترها به تابع فراخوانی شده

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

خروجی به صورت تصویر زیر است.

آرگومان های بازگشتی

روش دیگر استفاده از تابع bind()  است که به صورت زیر قابل استفاده خواهد بود:

• «Chrome 30.0»
• «Internet Explorer 0»
• «Firefox 1.0»
• «Edge»
• «Opera 0»
• «Safari 0»

خروجی مثال بالا به صورت زیر خواهد بود:

4:47:41 PM

4:47:43 PM

4:47:45 PM

4:47:47 PM

4:47:49 PM

حال خروجی قطعه کد فوق به صورت زیر خواهد بود:

Hello John Doe

Hello John Doe

Hello John Doe

….

با این حال، اگر کاربر بخواهد تابع فقط یک بار پس از تأخیری خاص اجرا شود، باید به جای آن از متد SetTimeout‎ استفاده کند. استفاده از این متدها بسته به نیاز برنامه بسیار حائز اهمیت است و در سناریوهای مختلف بسته به نیاز برنامه، هر کدام از آن‌ها می‌توانند مفید باشند.

محدودیت های تاخیر

مدت زمان اجرا کوتاه تر از فرکانس بازه زمانی

این مشکلات امکان دارد به دلیل تأخیر شبکه، عدم پاسخگویی سرور یا سایر عواملی باشد که می‌تواند بر زمان تکمیل درخواست‌ها تأثیر بگذارد. برای جلوگیری از چنین مشکلاتی، توصیه می‌شود از نوعی تابع الگوی SetTimeout()‎ بازگشتی استفاده شود. مثال زیر برای درک این موضوع مهم است.

در مثال بالا، تابعی با نام  loop()  اعلان شده است و بلافاصله با استفاده از نوعی تابع «خود فراخوانی» اجرا می‌شود. پس از اجرای منطق، تابع به صورت بازگشتی در داخل SetTimeout()‎  فراخوانی خواهد شد. اگرچه این الگوی اجرا در یک بازه زمانی ثابت را تضمین نمی‌کند، اما تضمین خواهد کرد که بازه قبلی پیش از تکرار کامل شده است، بنابراین از مسائلی جلوگیری می‌کند که امکان دارد به دلیل همپوشانی فواصل زمانی ایجاد شوند.

سازگاری با مرورگر

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

به عنوان مثال، اگر کاربر بخواهد عبارت “Hello World”  را پس از ٢ ثانیه تأخیر در کنسول چاپ شود، می‌تواند از کد زیر استفاده کند:

متد SetTimeout در جاوا اسکریپت دو آرگومان می‌گیرد. اولین آرگومان تابعی برای اجرا (در مثال بالا، یک تابع پیکان که پیام را ثبت می‌کند) و دومی نوعی زمان تاخیر برحسب میلی‌ثانیه (در مثال فوق ٢٠٠٠ میلی‌ثانیه = ٢ ثانیه) است. هنگامی که تایمر منقضی می‌شود، تابع ارسال شده به SetTimeout()‎ اجرا شده و پیام “Hello World” در کنسول چاپ می‌شود.

متد SetTimeout در جاوا اسکریپت چند پارامتر برای تنظیم یک تایمر نیاز دارد. سینتکس متد SetTimeout در جاوا اسکریپت به صورت زیر است:

پارامتر اول تابعی است که کاربر می‌خواهد بعد از یک تأخیر مشخص اجرا شود. این تابع را می‌توان به صورت درون‌خطی تعریف کرد یا می‌توان نوعی تابع با نام باشد. به عنوان مثال، می‌توان تابعی به نام greeting()  تعریف کرد که “Hello World” را در کنسول ثبت می‌کند.

1function greeting(){

2  console.log(“Hello World”);

3}

4

5setTimeout(greeting);

1function greeting(){

2  console.log(“Hello World”);

3}

4

5setTimeout(greeting, 3000);

هنگام فراخوانی SetTimeout()‎ ، پارامتر دوم تعداد میلی‌ثانیه‌هایی را برای انتظار قبل از اجرای تابع مشخص می‌کند. اگر پارامتر دوم مشخص نشده باشد یا روی صفر تنظیم شود، تابع بلافاصله اجرا خواهد شد.

علاوه بر این، کاربر همچنین می‌تواند پارامترهای اضافی را به تابعی ارسال کند که توسط SetTimeout()‎ فراخوانی می‌شود. به این پارامترها می‌توان در داخل تابع با استفاده از شی آرگومان‌های آن دسترسی داشت.

ممکن است جای تعجب باشد که چرا لازم است به جای انتقال مستقیم به تابع، پارامترها را جداگانه منتقل می‌کنیم. دلیل این امر این است که اگر پارامترها مستقیماً مانند مثال زیر ارسال شوند، کاربر به جای اینکه منتظر تأخیر مشخص شده باشد، تابع بلافاصله اجرا می‌شود:

دلیل اینکه کاربر نمی‌تواند مستقیماً پارامترها را به تابع منتقل کند این است که فوراً تابع را بدون انتظار اجرا می‌کند، زیرا کاربر در حال ارسال فراخوانی تابع، نه مرجع تابع، به عنوان اولین پارامتر است. بنابراین، باید پارامترها را از متد SetTimeout در جاوا اسکریپت به تابع منتقل کرد.

با ارسال شناسه، مهلت زمانی مربوطه لغو شده و تابع اجرا نمی‌شود