Sorun: Aynı tıklama işlemi neden birden fazla kez çalışıyor?
Bir bileşen her açıldığında yeniden başlatılıyorsa, aynı elemana tekrar tekrar olay dinleyicisi eklenebilir. Aşağıdaki küçük örnekte panel her açıldığında çağrılıyor. Fonksiyon, sepete ekleme düğmesine yeni bir dinleyici bağlıyor:
Kullanıcı paneli üç kez açtıktan sonra düğmeye bir kez bastığında istek üç kez gönderilebilir. Kod ilk bakışta doğru göründüğü için bu hata, özellikle dinamik arayüzlerde gözden kaçabilir.
AI’ye yalnızca “Bu kodda hata var mı?” diye sormak yerine, bileşenin yaşam döngüsünü ve fonksiyonunun kaç kez çağrılabileceğini açıkça belirtmek daha yararlıdır. Örneğin:
Dinleyici bileşen başına yalnızca bir kez kurulabiliyorsa, başlatma durumunu açıkça takip etmek mümkündür:
İşlevin yeniden başlatılması gerçekten gerekiyorsa, adlandırılmış işlev kullanılarak önceki kayıt kaldırılabilir:
İlk örnekteki anonim işlev ile kaldırılamaz; çünkü kaldırma sırasında aynı işlev referansı yoktur. Ancak yalnızca kayıt kaldırıp yeniden eklemek yerine, mümkünse başlatma mantığını tek seferlik tasarlamak daha anlaşılırdır. Ayrıca sunucu tarafında da aynı isteğin tekrarlanmasına karşı idempotency veya istek kimliğiyle korunmalıdır; istemci tarafındaki düzeltme tek başına güvenilirlik garantisi değildir.
AI önerisini doğrulama adımları fonksiyonunun bir kez çağrıldığını varsayabilir ve sorun olmadığını söyleyebilir. Tersine, her kullanımını da hatalı sanabilir; bazı uygulamalarda farklı yaşam döngülerinde bilinçli olarak birden fazla dinleyici bulunabilir. Bu nedenle öneri, çağrı sıklığı ve bileşenin yeniden oluşturulma davranışıyla birlikte incelenmeli; ağ isteği ve olay sayısı ölçülerek doğrulanmalıdır.
Bir bileşen her açıldığında yeniden başlatılıyorsa, aynı elemana tekrar tekrar olay dinleyicisi eklenebilir. Aşağıdaki küçük örnekte panel her açıldığında
initCart()
const addButton = document.querySelector('#add-to-cart');
function initCart() {
addButton.addEventListener('click', () => {
console.log('Ürün sepete eklendi');
sendAddRequest();
});
}
openPanel.addEventListener('click', () => {
initCart();
});
Kullanıcı paneli üç kez açtıktan sonra düğmeye bir kez bastığında istek üç kez gönderilebilir. Kod ilk bakışta doğru göründüğü için bu hata, özellikle dinamik arayüzlerde gözden kaçabilir.
AI’ye yalnızca “Bu kodda hata var mı?” diye sormak yerine, bileşenin yaşam döngüsünü ve
initCart()Daha güvenli düzeltmeBu fonksiyon bir modal her açıldığında çağrılıyor. Kullanıcı modalı birkaç kez açıp kapattıktan sonra düğmeye bir kez basıyor. Ağ isteğinin yalnızca bir kez gönderilmesini sağlamak için olası tekrarlı addEventListener kayıtlarını incele ve düzeltme öner.
Dinleyici bileşen başına yalnızca bir kez kurulabiliyorsa, başlatma durumunu açıkça takip etmek mümkündür:
const addButton = document.querySelector('#add-to-cart');
let cartInitialized = false;
function handleAddToCart() {
console.log('Ürün sepete eklendi');
sendAddRequest();
}
function initCart() {
if (cartInitialized) {
return;
}
addButton.addEventListener('click', handleAddToCart);
cartInitialized = true;
}
openPanel.addEventListener('click', initCart);
İşlevin yeniden başlatılması gerçekten gerekiyorsa, adlandırılmış işlev kullanılarak önceki kayıt kaldırılabilir:
function initCart() {
addButton.removeEventListener('click', handleAddToCart);
addButton.addEventListener('click', handleAddToCart);
}
İlk örnekteki anonim işlev
removeEventListenersendAddRequest()AI önerisini doğrulama adımları
- Dinleyicinin eklendiği fonksiyonun modal açılışında, yönlendirme sonrasında veya yeniden render işleminde kaç kez çağrıldığını izleyin.
- Tarayıcı geliştirici araçlarının Event Listeners bölümünde aynı elemana bağlı kayıtları kontrol edin.
- Modalı art arda açıp kapatın, ardından düğmeye bir kez basın; ağ panelinde yalnızca bir istek oluştuğunu doğrulayın.
- Bileşen yeniden oluşturuluyor ve eski DOM düğümü kaldırılıyorsa, yeni düğüm için başlatmanın doğru zamanda yapıldığını test edin.
- Birim veya uçtan uca testte çağrısını gözetim altına alıp tek tıklamada tek çağrı beklentisi koyun.
sendAddRequest
initCart()addEventListener