Суть этого примера в том, что нельзя нажать на кнопку(и) несколько раз пока последняя запрашиваемая страница не откроется, вероятно это будет полезно...
Также я реализовал возможность открыть страницы в текущем окне или в новом, за это отвечает содержимое
атрибута data-target="" :
<button class="progress-button" data-uri="https://toster.ru/q/311167?e=3769167#comment_1058109" data-target="_blank">Как сделать задержку на открытие ссылки?</button>
<button class="progress-button" data-uri="http://yandex.ru" data-target="_self">Еще одна кнопка...</button>
$(document).ready(function() {
$(function() {
var flag = new Boolean(true); // Защитит от частого нажатия на кнопку
// Клик
$('.progress-button').click(function(e) {
openUrl($(this));
e.preventDefault();
})
/**
* Открывает ссылку с задержкой
*
* @param {object} button - Нажатая кнопка
* @return {boolean}
*/
function openUrl(button) {
var delay = 2000, // Задержка 2 секунды
text = button.text(), // Текст который будет задан кнопке после окончания загрузки
uri = button.attr('data-uri'); // URL
// Проверяем не начата ли загрузка какой-либо ссылки
if (flag == true) {
flag = false;
// Показываем загрузку
button.text('загружаю...');
// С задержкой открываем URL, возвращая штатный текст кнопке, разрешаем открывать новые ссылки
setTimeout(function() {
flag = true;
button.text(text);
// Проверяем открыть ссылку в новом окне или в текущем
if (button.attr('data-target') === '_blank') {
window.open(uri);
return;
}
window.location = uri;
return;
}, delay);
}
return;
}
});
});
