Muhtemelen web sitenizin bir noktada, hemen değil, birkaç saniye sonra bir şey yapmasına ihtiyaç duymuşsunuzdur. Bunu başarmak için JavaScript, temelde bir zamanlayıcı görevi gören ve sıfıra ulaştığında belirli bir eylemi tetikleyen `setTimeout` adlı temel bir araç sunar . İlk bakışta basit görünen bu işlevin, programlama sırasında hata yapmaktan kaçınmak için bilinmesi gereken bazı incelikleri ve teknik detayları vardır.
Tarayıcıda sürekli olarak görsek de, bu yöntemin JavaScript dilinin temel bir parçası olmadığını, bunun yerine çalışma ortamı tarafından sağlandığını açıklığa kavuşturmak önemlidir . Bu, Chrome veya Firefox'ta kullandığımız gibi, Node.js'de de sistemin döndürdüğü değerlerde bazı farklılıklar olsa da, bu yöntemi bulduğumuz anlamına gelir. Uygulamalarınızın sorunsuz çalışmasını sağlamak için temel bilgilerden gelişmiş püf noktalarına kadar nasıl çalıştığını ayrıntılı olarak inceleyelim.
setTimeout tam olarak nedir ve nasıl kullanılır?
Basitçe ifade etmek gerekirse, bu global yöntem, belirli bir süre geçtikten sonra bir kod parçasının veya bir fonksiyonun yürütülmesini planlamanıza olanak tanır . Zamanlayıcı süresi dolduktan ve fonksiyon yürütüldükten sonra işlem sona erer; yani otomatik olarak tekrarlanmaz. Temel sözdizimi, ne yapmak istediğinizi ve ne kadar süre bekleyeceğinizi belirtmenizi gerektirir; bu süre her zaman milisaniye cinsinden ifade edilir (1000 ms'nin bir saniyeye eşit olduğunu unutmayın).
Başlatmak için ilk argüman olarak bir fonksiyon geçirebiliriz. Ancak, tarihsel nedenlerden dolayı, kod içeren bir metin dizisi geçirmek de mümkündür, ancak günümüzde bu kötü bir uygulama olarak kabul edilir ve kodu temiz ve güvenli tutmak için ok fonksiyonları veya adlandırılmış fonksiyonlara referanslar kullanmak çok daha iyidir.
Parametreler ve uygulama esnekliği
Zamanlayıcıyı yapılandırırken, ikinci parametre gecikme süresidir . Herhangi bir şey belirtmezsek, varsayılan değer 0'dır. Ancak asıl ilginç kısım şu: fonksiyonumuzun harici verilere ihtiyacı varsa ne olacak? Bunu ele almanın iki ana yolu var. Birincisi, orijinal çağrıyı saran ve istediğimiz argümanları geçirmemize olanak tanıyan anonim bir fonksiyon kullanmaktır. İkinci ve daha zarif yol ise, `setTimeout`'un üçüncü parametreden başlayarak ek argümanlar eklememize olanak tanımasından yararlanmaktır ; bu argümanlar doğrudan geri çağrı fonksiyonuna eşlenir.
ClearTimeout ile iptal yönetimi
Bazen hayat beklenmedik dönüşler alır ve henüz çalışmamış planlanmış bir görevi iptal etmemiz gerekir. Bunu yapmak için, `setTimeout` fonksiyonunun benzersiz bir tanımlayıcı (bir `timerId`) döndürdüğünü bilmemiz gerekir. Tarayıcılarda bu kimlik genellikle bir sayı iken, Node.js'de daha karmaşık bir nesnedir. Bu değeri bir değişkende saklarsak, işlemi iptal etmek ve kodun çalışmasını engellemek için ` clearTimeout(timerId)` fonksiyonunu çağırabilir ve böylece sistem kaynaklarından tasarruf edebiliriz.
Karşılaştırma: setTimeout ve setInterval
Bu iki yöntemi karıştırmak çok yaygındır. `setTimeout` fonksiyonu yalnızca bir kez çalıştırırken, `setInterval` tanımlanan aralık her geçtiğinde fonksiyonu tekrar tekrar çalıştırır. Ancak, gelişmiş bir yöntem daha var: iç içe `setTimeout` kullanımı . Bu, mevcut fonksiyonun çalışmasının hemen sonunda yeni bir `setTimeout` çağrısı yapmayı içerir.
Bu teknik, bir görevin bitişi ile bir sonraki görevin başlangıcı arasında gerçek ve sabit bir gecikme sağladığı için `setInterval`'den çok daha esnektir . `setInterval` ile, fonksiyonun yürütülmesi aralık süresinden daha uzun sürerse, çağrılar birikebilir veya duraklamadan çalışabilir. Buna karşılık, iç içe yerleştirme, zamanlamayı dinamik olarak ayarlamanıza olanak tanır; bu, örneğin aşırı yüklenmiş olabilecek bir sunucuya istek gönderiyorsanız ve bekleme aralığını artırmanız gerekiyorsa hayati önem taşır.
Sıfır gecikme ve sınırlamaların ilginç vakası
`setTimeout(func, 0)` kullandığınızda , fonksiyonun anında çalışacağını düşünebilirsiniz, ancak durum böyle değil. Olan şey, zamanlayıcının görevi mümkün olan en kısa sürede , ancak her zaman mevcut komut dosyası tamamen bittikten sonra çalıştırılmak üzere sıraya koymasıdır. Bu, "Yaptığınız işi bitirin ve mümkün olan en kısa sürede bunu yapın" demenin bir yoludur.
Ayrıca, tarayıcıların iç içe zamanlayıcılar için art arda beş kez çalıştıktan sonra minimum 4 ms'lik bir sınır koyduğunu belirtmek önemlidir . Bu, tarayıcının çökmesini önlemek için eski sürümlerden kalma bir özelliktir. Ancak, hassasiyet tam olarak doğru değildir; CPU aşırı yüklendiğinde veya sekme arka planda çalıştığında , tarayıcı pil gücünü korumak için yürütmeyi 300 ms'ye veya hatta bir saniyeye kadar geciktirebilir.
Modern çerçevelerde uygulama
Bu yöntem, React veya Angular gibi araçlara mükemmel şekilde uyarlanabilir. React'te ideal yaklaşım, bileşenin yaşam döngüsünü kontrol etmek ve zamanlayıcının dönüş fonksiyonuyla temizlenmesini sağlayarak bellek sızıntılarını önlemek için `setTimeout`'u bir `useEffect` hook'u içine sarmaktır. Angular'da ise uyarıları tetiklemek veya eşzamansız verileri yüklemek için bileşenin yapıcı fonksiyonuna veya yaşam döngüsü hook'larına kolayca entegre edilebilir.
Daha karmaşık yapılar arayanlar için, zamanlayıcılar Promise'ler ve async/await ile birleştirilebilir . Bu, çok daha okunaklı ve profesyonel bekleme dizileri oluşturmaya olanak tanır, meşhur "geri çağrı cehenneminden" kaçınır ve birden fazla zamanlayıcının eşzamansız ve düzenli bir şekilde yönetilmesini sağlar.
JavaScript'te zamanı yönetme yeteneği, dijital saatlerden animasyonlara ve bağlantı yeniden deneme sistemlerine kadar dinamik arayüzler oluşturmak için temeldir. `setTimeout`'u kullanmayı, `clearTimeout` ile geçersiz kılmayı ve olay döngüsüyle nasıl etkileşim kurduğunu anlamayı öğrenmek, uygulama performansını optimize etmenize ve son kullanıcı deneyimini iyileştirmenize olanak tanır; ancak zaman doğruluğunun büyük ölçüde ortama ve sistem yüküne bağlı olduğunu her zaman aklınızda tutmalısınız.