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

Question

[Влад Серов]

Есть кнопка заказать, при нажатии на неё - переадресовывает на страницу корзины, но это происходит быстрее чем товар добавится в неё.

Поэтому нужно что бы прошло 2-3 секунды перед открытием страницы.

Как можно задержать процесс открытия страницы?

Кнопка заказа имеет вид

<button class="buy" type="submit" onClick="window.location='/cart/'">ЗАКАЗАТЬ</button>

Answer 1

[Super User]

Если Вы пишете код и Вам понадобилась задержка, значит Вы что-то делаете не так.
Вариант 1: Найти способ отловить событие добавления в корзину и повесить на него обработчик, который открывает страницу корзины.
Вариант 2: Добавлять товар в корзину после/во время ее открытия.
Если же Вы настаиваете, то вот код:

<button class="buy" type="submit">ЗАКАЗАТЬ</button>

<script>
document.querySelector('.buy').addEventListener('click', function(e){
  e.preventDefault();
  setTimeout(function() { location.assign('/cart/); }, 3000);
});
</script>

Answer 2

[iCat]

Могу предположить, что вы добавляете товар в корзину при помощи ajax-запроса в JS, и сразу после совершения такого запроса переадресовываете пользователя на страницу корзины.
Если я не ошибаюсь в предположении, то я не рекомендовал бы использовать таймаут, т.к. при использовании таймаута 1) вы не можете быть уверены в том, что скрипт, вызываемый ajax-запросом, выполнится за отведенное на таймаут время, соответственно все равно будут возможны ситуации, когда товар еще не добавился, а переадресация уже произошла; и 2) если скрипт выполнится за меньшее количество времени, чем отведено под таймаут, пользователь все равно будет оставаться на текущей странице, ожидая окончания таймаута, что не выглядит хорошим решением с точки зрения user experience.
В таком случае наилучшим решением было бы совершать перенаправление на страницу корзины не сразу и даже не по таймауту, а в коллбэке ajax-запроса (при его успешном выполнении само собой). Этот вариант будет оптимальнее варианта с таймаутом, позволит перенаправлять на страницу только тогда, когда товар добавлен в корзину, плюс (при должной доработке) позволит обработать ситуации, когда товар не был добавлен в корзину из-за ошибки (отобразить ошибку пользователю, и т.п.).
Если же я не прав, и JS и ajax не используются для обработки нажатия на кнопку submit, то вам и переадресация тогда не должна быть нужной, т.к. сабмит формы подразумевает переход на url, указанный в атрибуте action формы, и переадресацией в данном случае должен заниматься серверный скрипт, обрабатывающий данные формы.

Answer 3

[Алексей Уколов]

А что мешает переадресовывать в конце того кода, который непосредственно в корзину добавляет? Зачем стрелять себе в ногу?

Comments

[Влад Серов]

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

Answer 4

[Pavel Torbeev]

<button class="buy" type="submit" onClick="click()'">ЗАКАЗАТЬ</button>

function click() {
setTimeout(function() { window.location='/cart/ }, 3000)
}

Comments

[Влад Серов]

Поставил, редиректа нет.

[Outoverlay]

Влад Серов: он скобку забыл закрыть. function click() {
setTimeout(function() { window.location='/cart/' }, 3000)
}