تابع setInterval جاوااسکریپت:

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

نکات اصلی تابع setInterval جاوااسکریپت

• متد JavaScript setInterval یک تابع مشخص را چندین بار در بازه های زمانی تعیین شده در میلی ثانیه اجرا می کند (1000ms = 1second).
• متد JS setInterval متغیر مشخصی را فراخوانی می کند تا زمانی که روش clearInterval فراخوانی شود یا پنجره بسته شود.
• متد JavaScript setInterval یک شناسه را برمی گرداند که می تواند با استفاده از روش clearInterval فاصله را متوقف کند.
• اگر فقط یکبار باید یک تابع را اجرا کنید ، از روش setTimeout استفاده کنید.

استفاده از مجموعه JavaScript setInterval

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

عملکرد JS setInterval مشابه روش setTimeout است. اونها چجوری متفاوت هستن؟ خوب ، setTimeout یک بار توابع را فرا می خواند. با این حال ، با استفاده از روش تنظیم فاصله ، می توانید چندین بار آنها را فراخوانی کنید.

فرض کنیم شما باید هر 3 ثانیه یک پیام برای بازدیدکنندگان وب سایت خود نمایش دهید. با استفاده از تابع JavaScript setInterval، می توانید این وظیفه را انجام دهید و ویژگی جدیدی را در وب سایت خود بگنجانید.

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

setInterval(() => {
  alert("Hello"); 
}, 3000);

نحو دنبال کردن

قطعه کد را در زیر مشاهده کنید. این نحو عملکرد است که باید در خاطر داشته باشید:

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

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

توجه: هر بازه زمانی کوتاهتر از 10 میلی ثانیه به طور خودکار به 10 تغییر می یابد.

توقف عملکرد

در بعضی موارد ، ممکن است لازم باشد JavaScript جلوی اجرای setInterval را بگیرد تا زمان فرا رسیدن زمان انجام شود. شما باید از روش ()clearInterval استفاده کنید. این به این معنی است که تنظیم تایمر را با استفاده از تابع JavaScript setInterval متوقف کنید.

()setInterval متغیری به نام ID فاصله را برمی گرداند. سپس می توانید از آن برای فراخوانی تابع clearInterval استفاده کنید ، زیرا توسط نحو مورد نیاز است:

clearInterval (intervalId) ؛

()clearInterval هیچ مقدار بازگشتی ندارد: تنها نتیجه ای که حاصل می شود این است که JavaScript از اجرای setInterval متوقف شود.

مثالهای کد برای تجزیه و تحلیل

برای داشتن یک تجربه یادگیری مفیدتر ، ما مثالهای کد مفیدی را آورده ایم که می توانید با استفاده از تابع JavaScript setInterval تمرین کنید.

مثال زیر هر 2 ثانیه یک هشدار popup را نمایش می دهد:

var myVar;
function myFunction() {
  myVar = setInterval(every2sec, 2000);
}

function every2sec() { 
  alert("Alert Text!"); 
}
myFunction();

اکنون ، این مثال بعدی یک عنصر HTML را با ساعت ID پیدا می کند و متن آن را تغییر می دهد تا هر ثانیه زمان فعلی را نشان دهد. به عبارت دیگر ، مانند یک ساعت دیجیتالی کار می کند:

var idVar = setInterval(() => { 
   timer()
}, 1000);

function timer() {
   var dateVar = new Date();
   var time = dateVar.toLocaleTimeString();
   document.getElementById("clock").innerHTML = time;
};

در حالی که این مثال بعدی دقیقاً مانند مثال فوق عمل می کند ، اما یک روش stopMyFunction دارد. اگر عملکرد را اجرا کنید ، ساعت متوقف می شود:

var idVar = setInterval(() => { 
  timer() 
}, 1000);

function timer() {    
  var dateVar = new Date();    
  var time = dateVar.toLocaleTimeString();         
  document.getElementById("clock").innerHTML = time;
}
 
function myStopFunction() {
  clearInterval(idVar);
}

می توانید از کد موجود در مثال زیر استفاده کنید تا عرض یک عنصر مشخص را تا عرض 100 پیکسل دقیق تغییر دهید:

function move() {  
  var elem = document.getElementById("moveBar");   
  var width = 0;  
  var idVar = setInterval(change, 10);  

function change() {    
  if (width == 100){
     clearInterval(idVar)
  } 
  else {      
     width++;        
     elem.style.width = width + '%';      
  }  
 }
}

آخرین مثال ما رنگ پس زمینه را از آهک به قرمز تغییر می دهد تا زمانی که تابع stopColor اجرا شود:

var idVar = setInterval(() => { 
  setColor() 
}, 400);

function setColor() {    
  var x = document.body;    
  x.style.backgroundColor = x.style.backgroundColor == "blue" ? "red" : "blue";
}

function stopColor() {
  clearInterval(idVar);
}