单击按钮后，计算x秒，然后使用jquery重定向到特定链接

Question

What i want to do is exactly what i mentioned in the question title. I have a form with a submit button. Is it possible using jQuery to redirect the user to a specific link page after 5 seconds starting count from the moment this user clicked the submit button?

Answer 1

You can use setTimeout and window.location

setTimeout(function(event) {
  window.location.href = url
    }, 5000);

Answer 2

The below code do exactly what you want:

$('#button').click(function() {
    setTimeout(function() {
        window.location.href = 'http://new-url';
    }, 5000);
})

Answer 3

This sounds like a job for JavaScript's setTimeout functionality. The first thing you'll need to do is prevent the form submitting immediately (default behaviour) with event.preventDefault() otherwise nothing will be executed.

Check out this example with comments, Should provide a bit more information for you;

<form method="post">
    <input type="text" name="text-field" placeholder="Enter something" />
    <button type="submit">Submit form</button>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $('form').on('submit', function(event) { // pass an event argument so we can call preventDefault
        event.preventDefault(); // call event.preventDefault to stop form submitting immediately 

        setTimeout(function() { // Set up a setTimeout operation
            console.log('form submitted after timeout');
            window.location.href = '/';
        }, 5000); /// 5000 ms == 5s
    });
});

Answer 4

You need to use setTimeout in order to achieve what you want to achieve. setTimeout is a function which takes two parameters:

• a callback function
• the timeout in milliseconds

Callback

A callback function is a function to be executed when a given event happens. In our case the event is that a given amount of time elapsed. This is how your callback could look like:

function redirect() {
    window.location.href = 'http://www.google.com';
}

Timeout

The timeout is the second parameter of the function. It defines the amount of time to elapse before the callback is being called. In our case you want 5 seconds to wait before the callback is executed, so the timeout will be 5000 milliseconds.

Usage

setTimeout(function() {
    window.location.href = 'http://www.google.com';
}, 5000);

or

function redirect() {
    window.location.href = 'http://www.google.com';
}
setTimeout(redirect, 5000);

Either way it is elegant to wrap a function around the solution and call the function on the onclick .