Как написать условие для кнопки, если клик происходит быстрее, чем через секунду от предыдущего, кнопка блокируется (disabled), счетчик обнуляется

Question

Сделайте кнопку, отображающую количество кликов по ней. Если очередной клик происходит быстрее, чем через секунду от предыдущего клика по кнопке, то кнопка блокируется (используйте атрибут disabled), счетчик кликов обнуляется.

const counter = document.getElementsByClassName ('counter') [0];
const button = document.getElementsByClassName('button')[0];
let clickCounter = 0;

button.addEventListener('click', function(){
    clickCounter++;
    counter.textContent = 'Сделано кликов:' + clickCounter;
});

<div class = "box">
    <h1 class="counter">Сделано кликов: 0  </h1>
    <button class="button">Нажми на меня!</button>
</div>

Answer 1

Добавьте setTimeout, который будет отсчитывать время на 1 секунду после нажатия и флаг, по которому проверять

const counter = document.getElementsByClassName ('counter') [0];
const button = document.getElementsByClassName('button')[0];

let clickCounter = 0;
let timeOff = false 

button.addEventListener('click', function(e){
    if (timeOff) {
        clickCounter = 0;
        e.target.disabled = true;
    } else {
        timeOff = true;
        clickCounter++;
        setTimeout(() => {
            timeOff = false;
            e.target.disabled = false;
        }, 1000);
    }
    counter.textContent = 'Сделано кликов:' + clickCounter;
});

<div class = "box">
<h1 class="counter">Сделано кликов: 0  </h1>
<button class="button">Нажми на меня!</button>
</div>

БЛОГ НА HUSL

Как написать условие для кнопки, если клик происходит быстрее, чем через секунду от предыдущего, кнопка блокируется (disabled), счетчик обнуляется

Ответы (1 шт):