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

Question

[Thomek]

Как сделать задержку в 5 секунд после нажатия по баннеру?
Проблема в том что бонус срабатывает сразу при клике по div и люди не переходят по баннеру до полной загрузки страницы а просто скипают.

Нужна задержка в 5 секунд и верху браузера document.title показывал отчет таймера, а после срабатывала выдача бонуса. Я плохо понимаю как это делать, подскажите поподробнее с примером!

Вот та часть кода по которой кликают по баннеру mav_bonus_item, ссылку не трогаем там все нормально.

<?php if($val['SAddDate'] === 0) { ?>
	<?php if((int)$val['Type'] === 2) { ?><br />
		<a class="btn btn-success" href="/earn/bonus?bonus_click_ml=<?php echo $val['Id']; ?>"><?php echo "{$val['PriceOt']} - {$val['PriceDo']} "; ?> руб</a><br />
	<?php } else { ?>
	<div class="mav_bonus_item" data-id="<?php echo $val['Id']; ?>" style="display: inline-block;">
		<?php echo $val['Code']; ?>
	</div>
<?php } ?>

Вот скрипт:

<script>
		 $(document).ready(function(){
		 	$('.mav_bonus_item a').attr('target','_blank');
		 	$('.mav_bonus_item').click(function(event) {
		 		var el = $(this);		 		
		 		el.html('<div class=""><i class="fa fa-5x fa-fw fa-pulse fa-spinner text-danger"></i></div>');
				$.ajax({
			        url: document.location.href,
	                type: "POST",   
	                dataType: 'json',
	                data: {bonus_click:el.data('id')},
	                success: function(d){
	                	if (d.ok) {
	                		el.replaceWith(d.amount);
	                	}
	                	else
	                		el.html('<div class="alert alert-danger"><strong>Произошла ошибка :( Перезагрузите страницу.</strong></div>');
			        },
                	error: function(){el.html('<div class="alert alert-danger"><strong>Произошла ошибка :( Перезагрузите страницу.</strong></div>')}
		    	});
		 	});
		 });
	</script>

Answer 1

[alexalexes]

Используйте setInterval, чтобы сделать счетчик обратного отсчета.
Не совсем понятно, в какой момент вы хотите перейти по ссылке, но местечко найдется, где это вставить.

let bonus_timer = 5; // глобальный счетчик обратного отсчета
// что-то еще делаем перед началом отсчета
let bonus_timer_handler = setInterval(function()
{
  if(bonus_timer > 0)
  {
   // перерисовать title
   bonus_timer--; // уменьшить счетчик
  }
   else
  {
     // выдать бонус
    clearInteval(bonus_timer_handler); // зачистить генерацию событий setInterval
   }
}
, 1000); // обновить состояние bonus_timer каждую секунду

Comments

[Thomek]

alexalexes Что-то ничего не происходит, в какую строку нужно поставить?!

[Thomek]

alexalexes А как же document.title = " "; в вкладке браузере ?!

[Thomek]

alexalexes Или цифры таймера можно поставить в место загрузочного спиннера

el.html('<div class=""><i class="fa fa-5x fa-fw fa-pulse fa-spinner text-danger"></i></div>');

[alexalexes]

А как же document.title = " "; в вкладке браузере ?!

Я специально накидал комментарии, чтобы в этих точках вы сами накидали нужные действия.

Или цифры таймера можно поставить в место загрузочного спиннера

Можно и спиннер включить, а потом выключить.

[Thomek]

alexalexes, как это все сделать плохо понимаю

[alexalexes]

Берите в руки функцию console.log и разбирайте, что делает этот код в консоли браузера.
Потом осенит идея в голову и расставите недостающие функции на свои места.
Никто за вас учиться отладке не будет.

[Thomek]

alexalexes, Может лучше готовый вариант) мне очень необходимо скорее решить эту проблему на сайте!

[Леонид Яковлев]

Thomek, за готовым решением сюда