1. setTimeout ile Birden Fazla Zamanlayıcıyı Yönetmek
JavaScript'teki `setTimeout` fonksiyonu, belirli bir süre sonra çalışacak bir işlev tanımlar. Ancak, birkaç farklı zamanlayıcıyı ard arda kullanmak bazen karmaşık hale gelebilir. Burada önemli olan, zamanlayıcıları *stack* içinde düzgün bir şekilde yönetmektir.
setTimeout(() => {
console.log("İlk işlem tamamlandı!");
setTimeout(() => {
console.log("İkinci işlem tamamlandı!");
}, 1000);
}, 1000);
Bu yaklaşım, işlerinizin sırasıyla çalışmasını sağlar ve kodun karmaşıklığını azaltır. Ancak unutmayın, çok fazla iç içe zamanlayıcı kullanmak kodunuzu karmaşıklaştırabilir. Bu yüzden zamanlayıcılar arasında geçiş yapmak için modern JavaScript'in `async/await` yapısını da kullanabilirsiniz.
2. setInterval ile Periyodik Görevler Yönetmek
Birçok geliştirici, `setInterval` fonksiyonunu kullanarak belirli aralıklarla tekrarlanan görevler tanımlar. Ancak, bu fonksiyon her zaman dikkatlice kullanılmalıdır. Örneğin, bir sayfa üzerinde her saniye veri çekiyorsanız, internet bağlantınız kesildiğinde bir hata meydana gelebilir ve interval durmaz. Bunu önlemek için interval’i durdurmak önemli bir adımdır.
const intervalId = setInterval(() => {
console.log("Veri çekiliyor...");
}, 1000);
// 5 saniye sonra interval'i durdurma
setTimeout(() => {
clearInterval(intervalId);
console.log("Interval durduruldu!");
}, 5000);
Bu kodda, `clearInterval` ile `setInterval` fonksiyonunu durduruyoruz. Böylece, gereksiz kaynak tüketimi engellenmiş olur ve sistemin performansı korunur.
3. Debounce ve Throttle Kullanımı ile Performans Optimizasyonu
Zamanlayıcıların önemli bir kullanım alanı da kullanıcının sürekli etkileşime girdiği durumlarda performansı optimize etmektir. Örneğin, bir arama kutusuna yazı yazarken her tuş basımında veritabanından veri çekmek istemezsiniz. Bunun yerine, yazma işlemi durduktan birkaç milisaniye sonra bir işlem yapılmasını sağlayabilirsiniz.
let timeoutId;
const debounce = (func, delay) => {
clearTimeout(timeoutId);
timeoutId = setTimeout(func, delay);
};
// Kullanıcı yazdıkça debounce fonksiyonu tetiklenecek
debounce(() => {
console.log("Arama yapıldı!");
}, 1000);
Burada, her tuş basımında işlemi erteleyerek yalnızca son tuş basımından sonra arama yapılmasını sağlıyoruz. Bu sayede, gereksiz yere veri çekmektense yalnızca kullanıcının beklenen eylemini işleme almış oluyoruz.
4. Zamanlayıcıları Asenkron Hale Getirme (async/await ile)
Birçok zamanlayıcı, asenkron işlemlerle uyumsuz olabilir. Ancak JavaScript'in `async/await` yapısı sayesinde, zamanlayıcılarınızı asenkron hale getirerek kodunuzu daha okunabilir ve yönetilebilir kılabilirsiniz. `setTimeout` gibi fonksiyonları, modern JavaScript özelliklerini kullanarak daha şık bir hale getirebiliriz.
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
async function performAction() {
console.log("Başlangıç!");
await delay(1000); // 1 saniye bekle
console.log("Bir saniye geçti!");
}
performAction();
Bu örnekte, zamanlayıcıları async fonksiyonları ile bağlayarak daha temiz ve daha yönetilebilir bir kod yapısı oluşturmuş olduk. Özellikle büyük projelerde bu yöntem, kodunuzu daha sürdürülebilir kılacaktır.
5. Zamanlayıcıları Yığının Üzerinde Yönetmek
Bazı durumlarda, zamanlayıcılarınızın öncelik sırasını belirlemek veya onları bir yığında (stack) tutmak gerekebilir. Bu, özellikle animasyonlar veya UI değişiklikleri gibi zaman odaklı işlemlerde faydalı olabilir. Böylece, yüksek öncelikli işlemler diğerlerinden önce tamamlanır.
const taskQueue = [];
function addTask(task) {
taskQueue.push(task);
processTasks();
}
function processTasks() {
if (taskQueue.length > 0) {
const task = taskQueue.shift();
setTimeout(task, 1000);
}
}
addTask(() => console.log("Birinci görev!"));
addTask(() => console.log("İkinci görev!"));
Bu yöntem, zamanlayıcılarınızın sırasıyla çalışmasını ve önceliklere göre işlemlerin yapılmasını sağlar. Eğer her bir görevin belirli bir zaman diliminde tamamlanması gerekiyorsa, bu yaklaşım ideal olacaktır.
### Sonuç:
JavaScript'teki zamanlayıcılar, doğru kullanıldığında uygulamanın performansını büyük ölçüde artırabilir. `setTimeout` ve `setInterval` gibi fonksiyonların yanı sıra, bu fonksiyonları modern JavaScript teknikleri ile birleştirerek daha verimli ve sürdürülebilir bir kod yapısı oluşturabilirsiniz. Hem performans hem de okunabilirlik açısından, zamanlayıcılarınızı doğru şekilde yönetmek, geliştirdiğiniz uygulamanın kullanıcı deneyimini de olumlu yönde etkileyecektir.
