Задержка перед повторными кликами

Кнопка в примере имеет HTML-код:

<button class="testclick">Клик</button>
<div></div>

1 2	<button class="testclick">Клик</button> <div></div>

И событие на клик, которое добавляет в div текст:

$('.testclick').click(function () {
	$(this).next().append('<p>Кнопка нажата</p>');
});

$('.testclick').click(function () {

$(this).next().append('<p>Кнопка нажата</p>');

});

Для того, чтобы установить задержку события на повторное нажатие, добавляем к кнопке атрибут delay-click и нужное время в миллисекундах.

Задержка 1 секунда

<button delay-click="1000" class="testclick">Клик</button>
<div></div>

1 2	<button delay-click="1000" class="testclick">Клик</button> <div></div>

Задержка 5 секунд

<button delay-click="5000" class="testclick">Клик</button>
<div></div>

1 2	<button delay-click="5000" class="testclick">Клик</button> <div></div>

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

$('[delay-click]').click(function (e) {
	let th = $(this);
	let delay = th.attr('delay-click'); 
	let disabled = th.attr('disabled-click'); 
	if (typeof disabled !== 'undefined' && disabled !== false) {
		e.stopImmediatePropagation();				
		return false;
		} else {
		th.attr('disabled-click', '')
		window.setTimeout(function() {
			th.removeAttr('disabled-click')
		}, delay);	
	}				
});

$('[delay-click]').click(function (e) {

let th = $(this);

let delay = th.attr('delay-click');

let disabled = th.attr('disabled-click');

if (typeof disabled !== 'undefined' && disabled !== false) {

e.stopImmediatePropagation();

return false;

} else {

th.attr('disabled-click', '')

window.setTimeout(function() {

th.removeAttr('disabled-click')

}, delay);

}

});

Также можно на CSS добавить стили для неактивной кнопки:

[disabled-click] {
	opacity: 0.5;
}

[disabled-click] {

opacity: 0.5;

}

Смотрите также:

Добавить комментарий: