این آموزش به شما کمک می‌کند تا با مثال‌های بصری نحوه کار متد داخلی جاوا اسکریپت، setTimeout، را درک کنید.

چطور از ()setTimeout در جاوا اسکریپت استفاده کنیم

متد ()setTimeout به شما امکان می‌دهد بعد از گذشت زمان مشخصی بخشی از کد را اجرا کنید. می‌توانید این متد را به عنوان راهی برای تنظیم یک تایمر برای اجرای کد جاوا اسکریپت در یک زمان خاص در نظر بگیرید.

مثلا کد زیر بعد از گذشت 2 ثانیه " Hello World" را در کنسول جاوا اسکریپت چاپ می‌کند:

setTimeout(function(){
    console.log("Hello World");
}, 2000);

console.log("setTimeout() example...");

کد بالا ابتدا " setTimeout() example..." را در کنسول چاپ می‌کند و بعد از گذشت 2 ثانیه از کدی که توسط جاوا اسکریپت اجرا شده است، " Hello World" چاپ می‌شود.

سینتکس متد ()setTimeout همانند زیر است:

setTimeout(function, milliseconds, parameter1, parameter2, ...);

اولین پارامتر متد ()setTimeout تابع جاوا اسکریپتی است که می‌خواهید آن را اجرا کنید. می‌توانید هنگامی که آن را ارسال می‌کنید، تابع را مستقیما بنویسید، یا می‌توانید همانند موردی که در زیر نشان داده شده است به یک تابع رجوع کنید:

function greeting(){
  console.log("Hello World");
}

setTimeout(greeting);

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

یک ثانیه برابر با 1000 میلی ثانیه است، بنابراین اگر می‌خواهید 3 ثانیه صبر کنید، باید 3000 را به عنوان آرگومان دوم ارسال کنید:

function greeting(){
  console.log("Hello World");
}

setTimeout(greeting, 3000);

اگر پارامتر دوم را حذف کنید، ()setTimeout بدون اینکه منتظر بمانید بلافاصله تابع را اجرا می‌کند.

در آخر شما می‌توانید پارامترهای دیگری را به متد ()setTimeout ارسال کنید که می‌تواند همانند کد زیر در function استفاده شود:

function greeting(name, role){
  console.log(`Hello, my name is ${name}`);
  console.log(`I'm a ${role}`);
}

setTimeout(greeting, 3000, "Nathan", "Software developer");

اکنون ممکن است فکر کنید "چرا پارامتراها را مستقیما به تابع ارسال نمی‌کنیم؟"

به این دلیل است که اگر پارامترها را مستقیما به این شکل ارسال کنیم:

setTimeout(greeting("Nathan", "Software developer"), 3000);

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

به همین دلیل است که اگر لازم باشد پارامتری را به تابع ارسال کنید، باید آن‌ها را از متد ()setTimeout ارسال کنید.

اما صادقانه بگوییم، ما به عنوان توسعه دهنده نرم افزار هرگز نیازی نمی‌بینیم تا پارامترهای دیگر را با متد ()setTimeout ارسال کنیم. پس نگران این موضوع نباشید.

چطور متد setTimeout را کنسل کنیم

شما همچنین می‌توانید با استفاده از متد ()clearTimeout از اجرای تابع توسط متد ()setTimeout جلوگیری کنید.

متد ()clearTimeout به id برگردانده شده توسط ()setTimeout نیاز دارد تا متوجه شود که کدام متد ()setTimeout کنسل شده است:

clearTimeout(id);

در اینجا مثالی از متد ()clearTimeout را در عمل می‌بینید:

const timeoutId = setTimeout(function(){
    console.log("Hello World");
}, 2000);

clearTimeout(timeoutId);
console.log(`Timeout ID ${timeoutId} has been cleared`);

اگر شما چندین متد ()setTimeout دارید، باید id های برگشتی از هر متد را ذخیره کنید و سپس متد ()clearTimeout را هر بار که نیاز به پاک کردن آن‌ها دارید، فراخوانی کنید.

جمع بندی

متد ()setTimeout جاوااسکریپت یک متد داخلی است که به شما اجازه می‌دهد تا اجرای یک تابع خاص را زمان‌بندی کنید. شما باید مدت زمان انتظار را در میلی ثانیه ارسال کنید، که یعنی برای یک ثانیه منتظر ماندن، باید 1000 میلی ثانیه را ارسال کنید.

برای کنسل کردن اجرای متد ()setTimeout، باید از متد ()clearTimeout استفاده کنید، وقتی متد ()setTimeout را فراخوانی می‌کنید مقدار id بازگشتی را ارسال کنید.