@zver28
Просто пыль

Как сделать задержку на открытие ссылки?

Здравствуйте господа, помогите пожалуйста.

Есть кнопка:

<button class="progress-button" type="submit" data-style="rotate-side-down" data-perspective data-horizontal">Подробнее</button>

Данная кнопка имеет анимацию загрузки при нажатии на нее. Как сделать так чтоб она была ссылкой? при нажатии на которую ссылка не сразу отрабатывала а через 2-3 сек. Объясню почему, кнопка не успевает проанимировать как открывается ссылка. Нужно чтоб при нажатии, она успела проанимировать, а после задержки в 2-3 сек, открылась ссылка которая будет указанна на кнопке?????

Заранее спасибо ребята.....
  • Вопрос задан
  • 4044 просмотра
Решения вопроса 1
passshift
@passshift
php, js, html5, css
Суть этого примера в том, что нельзя нажать на кнопку(и) несколько раз пока последняя запрашиваемая страница не откроется, вероятно это будет полезно...

Также я реализовал возможность открыть страницы в текущем окне или в новом, за это отвечает содержимое
атрибута 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;
  }
  
});

});
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
SilenceOfWinter
@SilenceOfWinter
та еще зажигалка...
Решение на jquery:
$('button').on('click', '.progress-button', function(e) {
	e.preventDefault();
	var url = $(this).data('src');
	setInterval(function() {
		window.location = url;
	}, 3000);
});
Ответ написан
@scorpion11133
<!DOCTYPE html>
<html>
<head>
   <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
   <script type="text/javascript">
   jQuery(document).ready(function ($) {
   
      $('.js-anchor').on('click', function(e) {
         e.preventDefault();
         
         var 
            href = $(this).attr('href'),
            timeout = 5000;
            
         setTimeout(function() {
            //window.open(href, '_self');
            location.href = href;
         }, timeout);
         
      });   
      
   }); 
   </script>   
</head>
<body>
  <a class="js-anchor" href="http://yandex.ru">click me</a>
</body>
</html>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы