- Konu sahibi
- #1
setTimeout(), verdiğiniz bir fonksiyonu belirli bir süre geçtikten sonra çalıştırmak için kullanılan JavaScript zamanlayıcısıdır. Süre milisaniye cinsindendir; ancak bu süre, fonksiyonun tam o anda çalışacağı anlamına gelmez. JavaScript ana iş parçacığı meşgulse callback, iş parçacığı boşalınca çalışır.Temel kullanım
En küçük tam örnek şöyledir:
Kod:
console.log("Başladı");
const timerId = setTimeout(() => {
console.log("Callback çalıştı");
}, 1000);
console.log("Zamanlayıcı kuruldu", timerId);Çalıştırdığınızda önce
Başladı, hemen ardından Zamanlayıcı kuruldu mesajını görürsünüz. Yaklaşık bir saniye sonra Callback çalıştı yazdırılır. setTimeout() beklerken JavaScript kodunun geri kalanını durdurmaz; bu nedenle çağrıdan sonraki console.log() daha önce çalışır.Sürenin nasıl yorumlanacağı
setTimeout(callback, 1000) ifadesindeki 1000, callback'in çalıştırılmasından önce beklenecek en kısa süreyi belirtir. Tarayıcıdaki başka JavaScript işlemleri, uzun süren bir event listener veya çağrı yığını doluysa callback daha geç çalışabilir. Bu yüzden setTimeout, hassas zaman ölçümü ya da kesin aralıklarla çalışan görevler için uygun değildir.Sıfır gecikme bile eşzamanlı çağrı anlamına gelmez. Aşağıdaki bağımsız örnekte önce A ve C, daha sonra B yazılır:
JavaScript:
console.log("A");
setTimeout(() => console.log("B"), 0);
console.log("C");| İhtiyaç | Uygun yaklaşım | Neden |
|---|---|---|
| Bir işlemi bir kez geciktirmek | setTimeout | Tek seferlik callback çalıştırır |
| Bekleyen işlemi iptal etmek | setTimeout + clearTimeout | Kullanıcı eylemi değiştiğinde zamanlayıcı durdurulabilir |
| Düzenli tekrar yapmak | setInterval veya kontrollü tekrar | setTimeout yalnızca bir kez çalışır |
| Kesin zaman ölçmek | Zaman ölçümüne uygun API ve tasarım | setTimeout gecikebilir |
İptal etme ve değer aktarma
Zamanlayıcıyı iptal etmek için
setTimeout() tarafından döndürülen kimliği clearTimeout() ile kullanın:
Kod:
const timerId = setTimeout(() => {
console.log("Bu mesaj yazdırılmayacak");
}, 2000);
clearTimeout(timerId);Callback'e değer aktarmanın pratik yolu, değeri kapanım (closure) içinde kullanmaktır:
Kod:
const kullanici = "Deniz";
setTimeout(() => {
console.log(`Merhaba ${kullanici}`);
}, 500);Bir fonksiyonun sonucunu doğrudan vermek yaygın bir hatadır.
setTimeout(console.log("Hazır"), 1000) yazarsanız console.log() hemen çalışır ve setTimeout() geçerli bir callback yerine dönüş değerini alır. Fonksiyonu çağırmadan aktarmalısınız:
Kod:
setTimeout(() => console.log("Hazır"), 1000);Hangi durumda kullanılmalı?
Karar verirken şu ayrımı kullanın:
Örneğin arama kutusunda kullanıcı her tuşa bastığında istek göndermek yerine kısa bir gecikme uygulamak istiyorsanız önceki zamanlayıcıyı iptal edip yenisini kurabilirsiniz:
Kod:
let timerId;
function aramayiGeciktir(metin) {
clearTimeout(timerId);
timerId = setTimeout(() => {
console.log("Arama yapılıyor:", metin);
}, 300);
}
aramayiGeciktir("jav");
aramayiGeciktir("javascript");Bu örnekte arka arkaya yapılan çağrılardan yalnızca sonuncusunun callback'i çalışır. Bu desen debounce olarak kullanılır; gerçek ağ isteği eklenirse isteğin hata yönetimi ve iptali ayrıca ele alınmalıdır.
Sık yapılan hatalar
- Süreyi saniye sanmak:
setTimeout(fn, 2)iki saniye değil, iki milisaniyelik minimum gecikme hedefler. - Callback yerine sonucu vermek:
setTimeout(fn(), 1000)fonksiyonu hemen çağırır. - İptal kimliğini kaybetmek:
clearTimeout()için dönen zamanlayıcı kimliğini saklayın. - Kesin çalışma zamanı beklemek: Ana iş parçacığı meşgulse callback gecikir.
- setTimeout'u döngü sanmak: Bir kez çalışır; tekrar için açıkça yeni zamanlayıcı kurmak veya başka bir zamanlama yaklaşımı seçmek gerekir.
