Bu yazımızda sizlerle birlikte javascriptte yaygın olarak kullanılan setTimeout ve setInterval fonksiyonlarına değineceğiz.
Bu iki fonksiyonun temel amacı; istediğiniz görevleri(komutları) belirli periyotlarda yerine getirmesidir.
Bu periyotlar milisaniye cinsinden girilir.
İkisini birbirinden ayıran nokta ise; setTimeout’un görevleri sadece bir defa yerine getirmesi, setInterval’in ise siz durdurmadığınız sürece aynı periyotta görevleri bir defadan fazla tekrarlamasıdır.
Settimeout
setTimeOut fonksiyonu belirttiğiniz milisaniye’den sonra tek seferlik çalışır.
Örneğin sitenizde x saniye sonra tek seferlik reklam çıkmasını istiyor olabilirsiniz.
setTimeout(() => {
//10 saniye sonra yapılacak işlemler
alert("reklam")
},10000)
10 saniye sonra karşılaşacağımız ekran görüntüsü:
Setinterval
setInterval fonksiyonu ise setTimeout’un neredeyse aynısıdır. Birbirinden ayıran nokta ise bu fonksiyonun birden fazla kez aynı periyotta çalışmasıdır.
Örneğin 15 saniye sonra reklamı geç butonu çıkan bir uygulama yapalım.
HTML:
<body> <p>Video <span id="time">15</span> saniye sonra açılacaktır.</p> </body>
JAVASCRIPT:
let second = 15;
setInterval(() => {
second--;
document.querySelector("#time").innerText = second;
}, 1000);
ÇIKTI:
Her bir saniyede second değişkeni bir azaltılarak ekrana basılıyor.
Fakat sonsuza kadar azalarak devam ediyor. Çünkü setInterval fonksiyonunu biz durdurmadığımız sürece işlemlerini yapmaya devam eder.
Clearinterval Ve Cleartimeout Fonksiyonları
Gelin şimdi de setInterval fonksiyonunu nasıl durduracağımıza bakalım.
Öncelikle yukarıda yazdığımız setInterval fonksiyonunu bir değişkene atayalım:
let second = 15;
let secondInterval = setInterval(() => {
second--;
document.querySelector("#time").innerText = second;
}, 1000);
Şimdi ise clearInterval fonksiyonunu kullanarak saniye 0 ise bu fonksiyonu kaldıralım. Kodlarımızın son hâli:
let second = 15;
let secondInterval = setInterval(() => {
second--;
document.querySelector("#time").innerText = second;
if (second == 0) clearInterval(secondInterval);
}, 1000);
clearTimeout’u da setTimeout kullandığınız işlemlerde yukarıdaki gibi kullanabilirsiniz.