Web Geliştirmede `setTimeout` ve `setInterval` ile Zamanlama Sanatı ⏱️

thecoder · Bugün 16:31

Web Geliştirmede `setTimeout` ve `setInterval` ile Zamanlama Sanatı

Selam dostlar! Bugün sizlerle, her JavaScript geliştiricisinin yolunun mutlaka kesiştiği ama bazen detayları gözden kaçan iki güçlü araçtan bahsedeceğim: setTimeout ve setInterval. Bu iki fonksiyon, arayüzde gecikmeli işlemler yapmaktan, tekrarlayan görevler oluşturmaya kadar birçok sihirli kapıyı aralıyor. Gelin, bu zamanlayıcıları sadece nasıl kullanacağımızı değil, doğru ve verimli bir şekilde nasıl yöneteceğimizi konuşalım.

Temel Fark: Bir Kere vs. Sürekli

İkisi de zamanla ilgili ama amaçları farklı:

setTimeout(callback, delay): Belirttiğiniz delay süresi (milisaniye cinsinden) geçtikten sonra, callback fonksiyonunu sadece bir kere çalıştırır. "Şu kadar süre sonra şunu yap" komutu gibi düşünebilirsiniz.
setInterval(callback, interval): Belirttiğiniz interval süresi kadar düzenli aralıklarla, callback fonksiyonunu sürekli çalıştırır. "Her şu kadar sürede bir bunu yap" komutudur.

setTimeout: Gecikmeli İşlemlerin Efendisi

Kullanımı son derece basit:

Kod:

// 2 saniye (2000ms) sonra konsola mesaj yazdır.
const zamanlayiciId = setTimeout(() => {
    console.log("2 saniye geçti! Merhaba!");
}, 2000);

Burada dikkat! setTimeout bir ID (kimlik) döndürür. Bu ID'yi, henüz çalışmamış zamanlayıcıyı iptal etmek için kullanabiliriz:

Kod:

clearTimeout(zamanlayiciId); // Zamanlayıcıyı iptal eder, mesaj konsola yazılmaz.

Gerçek Hayat Örneği: Kullanıcı bir arama kutusuna yazdıktan sonra, her tuş vuruşunda hemen API isteği atmak yerine, kullanıcı yazmayı bıraktıktan 500ms sonra arama yapmak istiyorsunuz. İşte burada `setTimeout` ve `clearTimeout` mükemmel bir ikili olur.

setInterval: Ritmik Tekrarların Mimarı

Belirli periyotlarla çalışmasını istediğiniz her şey için biçilmiş kaftan:

Kod:

// Her 1 saniyede bir sayacı artır ve konsola yazdır.
let sayac = 0;
const intervalId = setInterval(() => {
    sayac++;
    console.log(`Sayaç: ${sayac}`);

    if (sayac >= 5) {
        clearInterval(intervalId); // 5 olduğunda interval'i durdur.
        console.log("Interval durduruldu!");
    }
}, 1000);

Burada HAYATİ ÖNEMDE bir nokta var: clearInterval(intervalId). Eğer bir `setInterval`'i durdurmazsanız, uygulamanız kapansa bile (bazen) bellekte çalışmaya devam edebilir ve bellek sızıntısına (memory leak) neden olabilir. Her `setInterval` açtığınızda, nerede ve nasıl `clearInterval` yapacağınızı planlayın.

Dikkat Edilmesi Gereken Kritik Noktalar

Gecikme Garantisi Yok: `setTimeout(callback, 0)` demek "hemen çalıştır" demek değildir. Sadece "mümkün olan en kısa sürede" çalıştır demektir. Ana JavaScript iş parçacığı (main thread) meşgulse, callback beklemek zorunda kalır.
`this` Bağlamı Kaybolabilir: Callback olarak verdiğiniz fonksiyon, zamanlayıcı tarafından çağrıldığı için `this` değeri beklediğiniz gibi olmayabilir. Güvenli tarafta kalmak için arrow function kullanmak veya `this`'i bir değişkene bağlamak (`const self = this;`) iyi bir pratiktir.
Performans ve Doğruluk: `setInterval`, belirtilen aralıkların başlangıcını referans alır. Eğer callback'in çalışması interval süresinden uzun sürerse, bir sonraki callback kuyruğa girer ve bekler. Bu da arka arkaya yığılmalara neden olabilir. Çok hassas zamanlamalar için farklı yaklaşımlar (örneğin, `setTimeout`'u özyinelemeli/recursive çağırmak) düşünülebilir.
Sayfa Gizlendiğinde (Background Tab): Birçok modern tarayıcı, sekme görünür olmadığında `setInterval`'i yavaşlatır veya durdurur (örneğin, 1 saniyelik interval 5-10 saniyeye çıkabilir). Bu, pil ömrünü korumak içindir. Arka planda hassas zamanlama yapmanız gerekiyorsa, Web Workers gibi çözümlere bakmalısınız.

Pratik Örnek: Basit Bir Geri Sayım Sayacı

Tüm bu bilgileri birleştiren mini bir uygulama yapalım:

Kod:

function geriSayimBaslat(saniye) {
    const sayacElementi = document.getElementById('geri-sayim');
    let kalanSure = saniye;

    const interval = setInterval(() => {
        kalanSure--;
        sayacElementi.textContent = `Kalan Süre: ${kalanSure}s`;

        if (kalanSure <= 0) {
            clearInterval(interval);
            sayacElementi.textContent = "Süre Bitti! 🎉";
            sayacElementi.style.color = "green";
        } else if (kalanSure <= 5) {
            sayacElementi.style.color = "red"; // Son 5 saniyede kırmızı yap
        }
    }, 1000); // Her 1000ms = 1 saniyede bir çalış
}

// Kullanımı: geriSayimBaslat(10);

Bu örnekte, interval'i temizlemeyi (`clearInterval`) ve arayüzü güncellemeyi bir arada görüyoruz.

Sonuç olarak, `setTimeout` ve `setInterval` JavaScript'in asenkron dünyasının temel taşlarından. Onları doğru kullanmak, daha duyarlı (responsive), daha etkileşimli ve daha verimli uygulamalar yazmanın anahtarı. Tek yapmanız gereken, zamanlayıcıları başlatırken, nasıl ve ne zaman durduracağınızı da planlamak.

Umarım bu rehber faydalı olmuştur. Sorularınızı yorumlarda bekliyorum, görüşmek üzere!

Ara

Ara

Web Geliştirmede `setTimeout` ve `setInterval` ile Zamanlama Sanatı ⏱️

thecoder

Tema özelleştirme sistemi

Tam ekran yada dar ekran