در برنامهنویسی جاوا اسکریپت، مدیریت زمان و تاخیرها برای اجرای توابع در زمانهای مشخص اهمیت زیادی دارد. دو تابع مفید برای این کار، setTimeout و setInterval هستند. این توابع به شما این امکان را میدهند که عملیات را به تأخیر بیندازید یا به طور مداوم در فواصل زمانی مشخص اجرا کنید. در این مقاله، به بررسی نحوه استفاده و کاربردهای این توابع خواهیم پرداخت.
تابع 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 برای اجرای یک تابع به طور مداوم در فواصل زمانی مشخص استفاده میشود. این تابع تا زمانی که با 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 تکرار متوقف میشود.
برای جلوگیری از اجرای یک تابع با استفاده از 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 مفید است. به عنوان مثال، برای ارائه پاسخهای غیرهمزمان در وب اپلیکیشنها یا شبیهسازی تأخیر در پردازش.
مثال:
function fetchData() {
console.log("Fetching data...");
setTimeout(() => {
console.log("Data fetched");
}, 1000);
}
fetchData();
برای وظایف مداوم مانند بهروزرسانی نمایشگر یا اجرای عملیات به طور دورهای، 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 برای اجرای مداوم توابع در فواصل زمانی مشخص استفاده میشود. با درک و استفاده صحیح از این توابع، میتوانید برنامههای پیچیدهتری بنویسید که به راحتی با زمان و رویدادهای ناهمزمان تعامل داشته باشند.
نظری یافت نشد
آموزش کار با flex-grow، flex-shrink و flex-basis در CSS Flexbox: مدیریت اندازه و فضای عناصر
11م آبان 1403
مطالعه بیشتر
آموزش رویدادهای پیشرفته در جاوا اسکریپت: بابلینگ، کپچرینگ و توقف پیشفرض - راهنمای جامع
2م آبان 1403
مطالعه بیشتر
تفاوت Callbacks و Promises در جاوا اسکریپت: مقایسه جامع با مثالها
30م مهر 1403
مطالعه بیشتر
آموزش ساخت یک برنامه ساده با Fetch API در جاوا اسکریپت: راهنمای گام به گام
1م آبان 1403
مطالعه بیشتر
مفاهیم Promise و چگونگی استفاده از آن در جاوا اسکریپت: راهنمای کامل همراه با مثالها
30م مهر 1403
مطالعه بیشتر
استفاده از Viewports و Viewport Units در CSS: طراحی واکنشگرا با vw، vh، vmin و vmax
16م آبان 1403
مطالعه بیشتر
آموزش ایجاد تصویر و لینک در HTML: نحوه استفاده از تگهای img و a
21م مرداد 1402
مطالعه بیشتر
آموزش CSS Blend Modes: ادغام رنگها و تصاویر برای طراحی وب جذاب
18م شهریور 1402
مطالعه بیشتر
بررسی کتابخانههای محبوب جاوا اسکریپت: آشنایی با Lodash و Moment.js - مزایا و کاربردها
4م آبان 1403
مطالعه بیشتر
آموزش موقعیتبندی المانها با استفاده از position در CSS: نحوه استفاده از absolute، relative و fixed
5م شهریور 1402
مطالعه بیشتر
مدیریت رویدادها در جاوا اسکریپت: اضافه و حذف Event Listeners - آموزش جامع با مثالها
2م آبان 1403
مطالعه بیشتر
مفاهیم پیشرفته اشیاء در جاوا اسکریپت: مدیریت خصوصیات و متدها
4م مهر 1403
مطالعه بیشتر
تمامی حقوق معتلق به ناشر سایت است و کپی از آن پیگرد قانونی دارد