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

با تابع setTimeout جاوااسکریپت در این مقاله آشنا می شویم.

نکات اصلی setTimeout جاوااسکریپت:

• متد JS setTimeout بعد از گذشت زمان مشخص شده در میلی ثانیه ، یک تابع را فراخوانی می کند.
• عملکرد مشخص شده یک بار اجرا می شود. اگر می خواهید یک تابع را چندین بار اجرا کنید ، از روش setInterval استفاده کنید.
• برای جلوگیری از وقفه زمانی و جلوگیری از اجرای عملکرد ، از روش ()clearTimeout استفاده کنید.
• متد ()setTimeout جاوا اسکریپت یک شناسه را برمی گرداند که می تواند در روش ()clearTimeout استفاده شود.

کاربرد و هدف setTimeout جاوااسکریپت

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

فرض کنید شما یک توسعه دهنده هستید که می خواهد تجربه کاربر را در وب سایت خود ارتقا دهد. یکی از ویژگی های احتمالی قابل استفاده ، زمانبندی پیامی است که بعد از پایین رفتن کاربران تا انتهای صفحه ، نمایش داده می شود. تابع setTimeout جاوا اسکریپت می تواند به شما در تعیین زمان برای روش کمک کرده و بازدید کنندگان وب سایت خود را با ویژگی جدید تحت تأثیر قرار دهد.

لطفاً بخاطر داشته باشید که تابع setTimeout JavaScript یکبار توابع را اجرا می کند. اگر می خواهید این عملکرد چند بار تکرار شود ، باید از setInterval استفاده کنید.

نحو مورد نیاز

همانطور که در قطعه زیر مشاهده می کنید ، عملکرد JavaScript setTimeout می تواند شامل چندین پارامتر باشد:

setTimeout (عملکرد ، میلی ثانیه ، param_one ، param_two ، …)

اول از همه ، روش setTimeout جاوا اسکریپت باید شامل عملکردی باشد که قصد دارید آن را اعمال کنید. پارامتر دوم زمانی را برای فراخوانی عملکرد مشخص شده تعیین می کند. با این حال ، اختیاری است و مقدار پیش فرض آن 0 است. همچنین می توانید پارامترهایی را برای عملکردی که قبلاً نشان داده اید ، تعیین کنید.

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

برای درک بهتر مفهوم ، از مثالهای ارائه شده در زیر استفاده کنید. فراموش نکنید که آنها را در ویرایشگر کد باز کنید و کمی بازی کنید. با این روش ، درک بهتری از نحوه کار همه چیز خواهید یافت.

اولین مثال نشان می دهد که چگونه عملکرد JavaScript setTimeout می تواند یک جعبه هشدار را پس از 2 ثانیه باز کند:

var sampleVar;

function sampleFunction(){    
  sampleVar = setTimeout(alertFunc, 2000);
}

function alertFunc(){    
  alert("Two seconds have passed!");
}

این مثال بعدی هر 2 ثانیه (3 بار) متن یک عنصر را تغییر می دهد. برای اینکه این به درستی کار کند ، باید یک شناسه از برخی عناصر HTML برای مقابله با آن تنظیم کنید:

var x = document.getElementById("counter");
setTimeout(() => { x.innerHTML = "2 seconds" }, 2000);
setTimeout(() => { x.innerHTML = "4 seconds" }, 4000);
setTimeout(() => { x.innerHTML = "6 seconds" }, 6000);

اگر قبل از تمام شدن تایمر ، clearTimeout فراخوانی شود ، آخرین مثالی که آماده کردیم متوقف خواهد شد:

var sampleVar;
function sampleFunction(){
  sampleVar = setTimeout(() => { 
    alert("This timer will be stopped") 
  }, 3000);
}
function sampleStopFunction(){
  clearTimeout(sampleVar);
}
sampleFunction();