setInterval
Belirli aralıklarla tekrar çalışan kodu setInterval ile yazmayı öğrenirsin.
setInterval ile tekrarlı çağrı
setInterval bir fonksiyonu belirli aralıklarla tekrar tekrar çalıştırır. İkinci parametre yine milisaniyedir.
setInterval(() => {
console.log('Tik');
}, 1000);Bu kod her saniye Tik yazdırır. setTimeout'tan farkı, callback'in bir kez değil sürekli çağrılmasıdır. Zamanlayıcı clearInterval ile durdurulana kadar çalışmaya devam eder. Bu yüzden sayfa açıkken aralık sonsuza dek tekrar eder.
setInterval ile sayaç yapmak
setInterval içinde bir değişkeni artırarak sayaç yapabilirsin. Her çağrıda değişken bir artar ve sonucu bir öğeye yazarsın.
const counter = document.querySelector('#counter');
let count = 0;
setInterval(() => {
count = count + 1;
counter.textContent = count;
}, 1000);Bu kod her saniye count'u bir artırır ve #counter öğesine yazar. Sayfa açıkken sayaç sonsuza dek artar. Durdurmak için clearInterval gerekir; bir sonraki derste göreceğiz.
Uygulama Sayaç öğesini her saniye 1 artır
Bir #counter öğesini setInterval ile her saniye 1 artır. count değişkenini artır ve counter.textContent'e yaz.
Örnek çözümü göster
const counter = document.querySelector('#counter');
let count = 0;
setInterval(() => {
count = count + 1;
counter.textContent = count;
}, 1000);Kendini test et
-
setInterval ve setTimeout arasındaki fark nedir?
- setInterval callback'i tekrar tekrar çalıştırır, setTimeout bir kez
- setInterval daha hızlıdır
- setTimeout sadece gecikme için kullanılır
- İkisi de aynıdır
Cevabı göster
setInterval callback'i tekrar tekrar çalıştırır, setTimeout bir kez — Doğru! setInterval callback'i sürekli çağırır, setTimeout yalnızca bir kez.
-
setInterval çağrısını tamamla
setInterval(() => { console.log('Tik'); }, ____);Cevabı göster
setInterval(() => { console.log('Tik'); }, 2000); -
setInterval parçalarını eşleştir
- setInterval
- tekrarlı zamanlayıcı
- callback
- her aralıkta çalışır
- 1000
- 1 saniyelik aralık
- count = count + 1
- sayacı bir artırır