Javascript'de Timer

Merhaba Webkolog Takipçileri!

Web sayfalarınızda belirli aralıklarla veya belirli bir gecikmeyle bir şeyler yapmak istediğinizde imdadınıza JavaScript'in zamanlayıcı (timer) fonksiyonları yetişir. Bu fonksiyonlar sayesinde, sayfa yüklendikten birkaç saniye sonra bir reklam gösterebilir, bir animasyonu düzenli aralıklarla çalıştırabilir veya bir sayacın değerini güncelleyebilirsiniz. JavaScript bize bu konuda iki temel araç sunar: setTimeout() ve setInterval(). Bugün, bu iki güçlü fonksiyonu ve onlarla birlikte gelen clearTimeout() ve clearInterval() yardımcılarını ayrıntılı olarak inceleyeceğiz. Hazırsanız, web sitenizde zamanı kontrol altına almaya başlayalım!

---

1. setTimeout(): Tek Seferlik Gecikmeler İçin

setTimeout() fonksiyonu, belirli bir süre sonra yalnızca bir kez çalışacak bir fonksiyonu ayarlamanızı sağlar. Bir nevi "biraz bekle, sonra şunu yap" komutudur. Bu fonksiyon, ayarlanan zamanlayıcının kimliğini (bir ID numarası) döndürür, bu kimliği daha sonra zamanlayıcıyı iptal etmek için kullanabilirsiniz.

Kullanım Şekli:

setTimeout(fonksiyon, gecikmeSuresiMilisaniye, [argüman1, argüman2, ...]);

• fonksiyon: Gecikme süresi dolduktan sonra çalışacak olan fonksiyon. Bu, doğrudan bir fonksiyon adı olabileceği gibi, anonim bir fonksiyon da olabilir.
• gecikmeSuresiMilisaniye: Fonksiyonun çalıştırılması için beklenecek süre, milisaniye cinsinden (1000 milisaniye = 1 saniye).
• argümanlar (isteğe bağlı): Fonksiyona iletilecek ek argümanlar. Bu kısım genellikle eski tarayıcılar tarafından desteklenmediği için anonim fonksiyon içinde argümanları kapatmak daha güvenli bir yöntemdir.

Örnekler:

// 3 saniye sonra bir uyarı göster
setTimeout(() => {
    alert("3 saniye geçti!");
}, 3000);

// Parametre alan bir fonksiyonu gecikmeli çalıştırma
function merhabaDe(isim) {
    console.log(`Merhaba, ${isim}!`);
}

setTimeout(merhabaDe, 2000, "Webkolog"); // 2 saniye sonra "Merhaba, Webkolog!" yazar

// Bir elementin görünürlüğünü belirli bir süre sonra değiştirme
document.getElementById('mesajKutusu').style.display = 'block'; // Mesajı görünür yap

setTimeout(() => {
    document.getElementById('mesajKutusu').style.display = 'none'; // 5 saniye sonra gizle
}, 5000);

clearTimeout(): Zamanlayıcıyı İptal Etme

Eğer setTimeout() ile ayarladığınız bir fonksiyonu, belirlenen süre dolmadan önce çalıştırmaktan vazgeçerseniz, clearTimeout() fonksiyonunu kullanabilirsiniz. Bu, özellikle kullanıcının bir eylemiyle zamanlanmış bir işlemi iptal etmek istediğiniz durumlarda (örneğin, bir "geri al" veya "iptal et" butonu) çok işinize yarar.

// HTML: <button id="gecikmeliMesajBtn">Gecikmeli Mesaj Gönder</button>
// HTML: <button id="iptalMesajBtn">Mesajı İptal Et</button>

let mesajTimeoutId; // Zamanlayıcı kimliğini saklamak için değişken

document.getElementById('gecikmeliMesajBtn').addEventListener('click', () => {
    console.log("Mesaj 5 saniye içinde görünecek...");
    mesajTimeoutId = setTimeout(() => {
        alert("Gecikmeli mesajınız geldi!");
    }, 5000);
});

document.getElementById('iptalMesajBtn').addEventListener('click', () => {
    if (mesajTimeoutId) {
        clearTimeout(mesajTimeoutId); // Zamanlayıcıyı iptal et
        console.log("Gecikmeli mesaj iptal edildi.");
    }
});

---

2. setInterval(): Düzenli Aralıklarla Tekrarlayan İşlemler İçin

setInterval() fonksiyonu, belirli bir süre sonra başlayarak fonksiyonunuzu düzenli aralıklarla tekrar tekrar çalıştırmanızı sağlar. Bir nevi "her X saniyede bir şunu yap" komutudur. Bu fonksiyon da ayarlanan zamanlayıcının kimliğini (bir ID numarası) döndürür, bu kimliği daha sonra zamanlayıcıyı durdurmak için kullanabilirsiniz.

Kullanım Şekli:

setInterval(fonksiyon, aralikSuresiMilisaniye, [argüman1, argüman2, ...]);

• fonksiyon: Belirlenen aralıklarla tekrar tekrar çalışacak olan fonksiyon.
• aralikSuresiMilisaniye: Fonksiyonun her tekrar arasında beklenecek süre, milisaniye cinsinden.
• argümanlar (isteğe bağlı): Fonksiyona iletilecek ek argümanlar.

Örnekler:

// Her saniye bir sayacı güncelle
let sayac = 0;
const sayacDiv = document.getElementById('sayac'); // HTML'de <div id="sayac"></div> olduğunu varsayalım

setInterval(() => {
    sayac++;
    sayacDiv.textContent = `Geçen Saniye: ${sayac}`;
}, 1000); // Her 1 saniyede bir çalışır

// Her 3 saniyede bir resim değiştirme (basit bir döngü)
const resimElementi = document.getElementById('slaytResmi'); // <img id="slaytResmi" src="resim1.jpg">
const resimler = ['resim1.jpg', 'resim2.jpg', 'resim3.jpg'];
let gecerliResimIndex = 0;

setInterval(() => {
    gecerliResimIndex = (gecerliResimIndex + 1) % resimler.length;
    resimElementi.src = resimler[gecerliResimIndex];
}, 3000);

clearInterval(): Zamanlayıcıyı Durdurma

setInterval() ile ayarladığınız sürekli çalışan bir zamanlayıcıyı durdurmak için clearInterval() fonksiyonunu kullanmalısınız. Aksi takdirde, sayfa kapanana kadar veya kullanıcı navigasyon yapana kadar bu fonksiyon çalışmaya devam eder ve gereksiz kaynak tüketimine yol açabilir.

// HTML: <button id="baslatBtn">Sayacı Başlat</button>
// HTML: <button id="durdurBtn">Sayacı Durdur</button>
// HTML: <div id="dinamikSayac">0</div>

let dinamikSayacDeger = 0;
let dinamikSayacIntervalId; // Zamanlayıcı kimliğini saklamak için

document.getElementById('baslatBtn').addEventListener('click', () => {
    if (!dinamikSayacIntervalId) { // Zaten çalışmıyorsa başlat
        dinamikSayacIntervalId = setInterval(() => {
            dinamikSayacDeger++;
            document.getElementById('dinamikSayac').textContent = dinamikSayacDeger;
            console.log("Sayaç:", dinamikSayacDeger);
        }, 1000);
        console.log("Sayaç başlatıldı.");
    }
});

document.getElementById('durdurBtn').addEventListener('click', () => {
    if (dinamikSayacIntervalId) {
        clearInterval(dinamikSayacIntervalId); // Zamanlayıcıyı durdur
        dinamikSayacIntervalId = null; // ID'yi sıfırla
        console.log("Sayaç durduruldu.");
    }
});

---

Önemli Notlar ve İpuçları

• Milisaniye Hassasiyeti: JavaScript'teki zamanlayıcılar tam olarak belirtilen milisaniye süresi kadar gecikmeyebilir. Tarayıcının ana iş parçacığı (main thread) meşgul olduğunda, zamanlayıcılar sıraya girer ve belirtilen süreden biraz daha geç çalışabilir. Genellikle minimum 4ms'lik bir gecikme vardır.
• Global Kapsam: setTimeout ve setInterval fonksiyonları window nesnesinin metotlarıdır, yani window.setTimeout() şeklinde de çağırabilirsiniz ama genellikle window yazılmadan kullanılır.
• "Sleep" Yok: JavaScript'te programın çalışmasını duraklatacak doğrudan bir "sleep" fonksiyonu yoktur. setTimeout, eş zamansız (asynchronous) çalıştığı için kodun geri kalanını bloke etmez. Eğer senkron bir bekleme süresi istiyorsanız, genellikle async/await ile Promise tabanlı bir setTimeout sarmalayıcı kullanmanız gerekir.
• CPU Kullanımı: setInterval'ı çok kısa aralıklarla (örn. 10ms'den az) kullanmaktan kaçının. Bu, tarayıcının ana iş parçacığını aşırı meşgul ederek sayfanın performansını düşürebilir ve batarya tüketimini artırabilir.

---

Sonuç

JavaScript'in setTimeout() ve setInterval() fonksiyonları, web uygulamalarınızda zamana bağlı olayları yönetmek için vazgeçilmez araçlardır. İster tek seferlik bir gecikme, ister düzenli aralıklarla tekrarlayan bir görev olsun, bu zamanlayıcılar size esneklik sağlar. Unutmayın ki, ayarladığınız zamanlayıcıları clearTimeout() ve clearInterval() ile gerektiğinde durdurmak, uygulamanızın performansını ve kaynak kullanımını optimize etmek açısından kritiktir. Bu fonksiyonları ustaca kullanarak, kullanıcılarınıza daha dinamik ve keyifli bir deneyim sunabilirsiniz.

Webkolog'u takipte kalın!

Hepinize bol kodlu ve başarılı projeler dilerim!