JavaScript ile Buton ve Linklere “İşlem Yapılıyor…” Spinner Ekleme

Web uygulamalarında kullanıcıların aynı işlemi birden fazla kez başlatmasını engellemek kritik öneme sahiptir. Özellikle form gönderimleri veya buton tıklamaları sırasında kullanıcılar sabırsız davranabilir ve butona defalarca basabilir. Bu durum hem veri tekrarına hem de performans sorunlarına yol açar.

Bunu önlemenin en kolay yolu, tıklanan butonun veya linkin geçici olarak devre dışı bırakılması ve kullanıcıya “İşlem yapılıyor…” mesajının gösterilmesidir.

Çözüm: JavaScript ile Buton Disable/Enable ile Spinner Ekleme

Hazırladığımız JavaScript kodu sayesinde:

• Hem <button> hem de <a> etiketleri desteklenir.
• ID’ye sahip elemanlarda doğrudan kullanılabilir.
• Liste elemanlarında (ör. tablo satırı, liste satırı) ID olmasa bile çalışır.
• Kullanıcıya işlem süresince spinner animasyonu gösterilir.
• İşlem tamamlandığında buton veya link orijinal haline geri döner.

Kod

<script>
const orjinalTextler = new WeakMap();

function butonDisable(target, mesaj = "İşlem yapılıyor...") {
    const el = typeof target === "string" ? document.getElementById(target) : target;
    if (!el) return;

    if (!orjinalTextler.has(el)) {
        orjinalTextler.set(el, el.innerHTML.trim());
    }

    const spinner = `<i class="fas fa-spinner fa-spin me-1"></i>`;

    if (el.tagName.toLowerCase() === "a") {
        el.style.pointerEvents = "none";
        el.classList.add("opacity-50");
        el.innerHTML = el.textContent.trim().length > 0 ? `${spinner} ${mesaj}` : spinner;
    } else {
        el.disabled = true;
        el.innerHTML = el.textContent.trim().length > 0 ? `${spinner} ${mesaj}` : spinner;
    }
}

function butonEnable(target) {
    const el = typeof target === "string" ? document.getElementById(target) : target;
    if (!el) return;

    if (el.tagName.toLowerCase() === "a") {
        el.style.pointerEvents = "auto";
        el.classList.remove("opacity-50");
    } else {
        el.disabled = false;
    }

    if (orjinalTextler.has(el)) {
        el.innerHTML = orjinalTextler.get(el);
        orjinalTextler.delete(el);
    }
}
</script>

Kullanım Örnekleri

1.Normal Buton

<button id="kaydetBtn" onclick="testIslem(this)">Kaydet</button>

<script>
function testIslem(btn) {
    butonDisable(btn, "Kaydediliyor...");
    setTimeout(() => {
        butonEnable(btn);
        alert("İşlem tamamlandı!");
    }, 2000);
}
</script>

2.Liste İçindeki Buton & Link

<ul>
    <li><button onclick="testIslem(this)">Sil</button></li>
    <li><a href="#" onclick="testIslem(this)">Güncelle</a></li>
</ul>

3.ID Değeri ile Kullanım

<button id="gonderBtn" onclick="formGonder()">Gönder</button>

<script>
function formGonder() {
    // ID değerini doğrudan veriyoruz
    butonDisable("gonderBtn", "Gönderiliyor...");

    setTimeout(() => {
        butonEnable("gonderBtn");
        alert("Form gönderildi!");
    }, 2000);
}
</script>

Sonuç

Bu yöntem sayesinde:

• Kullanıcıların aynı işlemi tekrar tekrar tetiklemesi engellenir.
• Daha güvenli ve kontrollü bir kullanıcı deneyimi sağlanır.
• İşlem süresince “bekleme” hissi net olarak verilir.