How to set a delay to open a link?

Question

JavaScript

There is an order button, when you click on it, it redirects to the cart page, but this happens faster than the product is added to it.
Therefore, it is necessary that 2-3 seconds pass before opening the page.
How can I delay the page opening process?
The order button looks like

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

Answer 1

If you are writing code and you need a delay, then you are doing something wrong.
Option 1: Find a way to catch the add to cart event and attach a handler to it that opens the cart page.
Option 2: Add an item to the cart after/during its opening.
If you insist, then here is the code:

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

Answer 2

I can assume that you add an item to the cart using an ajax request in JS, and immediately after making such a request, you redirect the user to the cart page.
If I am not mistaken in my assumption, then I would not recommend using a timeout, because when using a timeout 1) you cannot be sure that the script called by the ajax request will be executed within the time allotted for the timeout, so situations will still be possible when the product has not yet been added, and the redirect has already occurred; and 2) if the script executes in less time than the timeout, the user will still stay on the current page, waiting for the timeout to end, which does not look like a good solution in terms of user experience.
In this case, the best solution would be to redirect to the cart page not immediately and not even by timeout, but in the ajax request callback (if it is successfully executed by itself). This option will be better than the timeout option, it will allow you to redirect to the page only when the product is added to the cart, plus (with proper refinement) it will allow you to handle situations when the product was not added to the cart due to an error (display an error to the user, etc.). P.).
If I'm wrong, and JS and ajax are not used to process the click on the submit button, then you shouldn't need a redirect either, because submitting the form implies going to the url specified in the action attribute of the form, and in this case, the server script that processes the form data should handle the redirect.

Answer 3

And what prevents you from redirecting at the end of the code that adds directly to the basket? Why shoot yourself in the foot?

Answer 4

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

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