10 Dakikada bir tıklanabilen buton | Cevap #11258

Merhaba, 1 Kullanıcı ve 1 İlan tablom var. Kullanıcılar ilanlarını ekleyip, yayına alabiliyor. İstek üzerine "Üste taşıma" butonu eklemeye karar verdim fakat butonu aktif olarak bırakmak istemiyorum.

Yaklaşık 2 saattir nasıl bir mantık kurabilirim diye düşünüyorum ama saatten mi yoksa bilgimin yetersiz olduğundan mı bilemiyorum ama kodu tam yazmaya başlarken "o iş öyle olmaz ki" diye beynim uyarıp duruyor.

Google'da çeşitli forumlarda yapmak istediğim konuyu aradım fakat herkes mantığı anlatıp, bırakıp gitmiş. çoğu mantıksız bir mantık anlatıp bir daha cevap bile vermemiş neredeyse.

Yapmak istediğim şey tam olarak şu;

İlanlar listesinde her kullanıcının kendi ilanında görebileceği "Yukarı Taşı" butonunun olması ve bu butona tıklandığı zaman işlem sayfasında tarihe +10 ekleyip, 10 dakika boyunca bu butona tekrar tıklanmamasını sağlamak.

Aslında gayet açık ve net okuduğum zaman kendime anlatabiliyorum ama iş kod yazmaya geldiği zaman tarihe nasıl + 10 ekleyip, o butonu 10 dakika sonra aktif veya pasif edeceğim kısmını kendime anlatamıyorum. Bu konu için bana yardım edebilir misiniz? şimdiden cevaplar için teşekkür ederim.

<!-- 
    1. JS ile 10 dakikada bir tıklanabilen buton oluşturuyoruz
    2. kalan süreyi saat dakika saniye olarak bir div içerisinde gösteriyoruz
    3. süre bittiğinde butonu tekrar tıklanabilir hale getiriyoruz
-->
<button id="btn">Tıkla</button> 
<br><br>
<div id="time"></div>

<script>
    let btn = document.getElementById("btn");                           // butonu seçtik
    let time = document.getElementById("time");                         // div'i seçtik
    let timeLeft = 600;                                                 // 10 dakika = 600 saniye
    let timer = null;                                                   // timer değişkeni oluşturduk

    btn.addEventListener("click", () => {                               // butona tıklandığında
        if (timer == null) {                                            // timer boşsa
            btn.disabled = true;                                        // butonu devre dışı bırak
            timer = setInterval(() => {                                 // timer değişkenine setInterval fonksiyonunu atadık
                timeLeft--;                                             // her saniyede 1 azalttık
                // let hour = Math.floor(timeLeft / 3600);              // saat
                let minute = Math.floor((timeLeft % 3600) / 60);        // dakika
                let second = timeLeft % 60;                             // saniye
                // time.innerHTML = `Kalan Süre: ${hour} : ${minute} : ${second}`;
                time.innerHTML = `Kalan Süre: ${minute} : ${second}`;   // dakika saniye olarak yazdırdık
                if (timeLeft == 0) {                                    // süre bittiğinde
                    clearInterval(timer);                               // timer'ı durdurduk
                    timer = null;                                       // timer değişkenini boşalttık
                    btn.disabled = false;                               // butonu tekrar tıklanabilir hale getirdik
                    timeLeft = 600;                                     // süreyi tekrar 600 saniye yaptık
                }                                                       
            }, 1000);                                                   // her saniyede bir çalıştır
        }                                                           
    });
</script>