JQuery Redirect to URL after specified time

Question

Is there a way to use JQuery to redirect to a specific URL after a give time period?

If you want cross-browser and seo support: [redirect generator](http://insider.zone/tools/client-side-url-redirect-generator/) — Patartics Milán, Oct 16 '16 at 12:43

Rion Williams · Answer 1 · 2017-05-01T14:31:23.097

122

You could use the setTimeout() function:

// Your delay in milliseconds
var delay = 1000; 
setTimeout(function(){ window.location = URL; }, delay);

edited May 01 '17 at 14:31

answered Sep 01 '11 at 21:20

Rion Williams

74,820
37
200
327

score 59 · Answer 2 · answered Sep 01 '11 at 21:21

59

You don't really need jQuery for this. You could do it with plain javascript using the setTimeout method:

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

answered Sep 01 '11 at 21:21

Darin Dimitrov

1,023,142
271
3,287
2,928

score 14 · Answer 3 · edited Jan 02 '19 at 03:55

14

$(document).ready(function() {
    window.setInterval(function() {
    var timeLeft    = $("#timeLeft").html();
        if(eval(timeLeft) == 0) {
                window.location= ("http://www.technicalkeeda.com");
        } else {
            $("#timeLeft").html(eval(timeLeft)- eval(1));
        }
    }, 1000);
});

edited Jan 02 '19 at 03:55

soycharliente

777
2
7
26

answered Apr 01 '13 at 03:28

Vicky

9,515
16
71
88

4

I would discourage the use of `eval()` as it has many dangerous consequences. Instead I would recommend using `parseInt()`. – winhowes Feb 23 '15 at 04:31
The only problem with this is that if the redirect doesn't happen quickly it keeps redirecting and never gets to the target page – nickornotto Dec 20 '19 at 16:20

score 12 · Answer 4 · answered Jan 24 '14 at 05:54

12

You can use

    $(document).ready(function(){
      setTimeout(function() {
       window.location.href = "http://test.example.com/;"
      }, 5000);
    });

answered Jan 24 '14 at 05:54

Mandeep Singh

983
8
9

score 6 · Answer 5 · answered May 28 '13 at 18:53

6

just use:

setTimeout("window.location.href='yoururl';",4000);

..where the '4000' is m.second

answered May 28 '13 at 18:53

Attila Nagy

91
1
1

score 5 · Answer 6 · answered Jan 31 '18 at 19:08

Yes, the solution is to use setTimeout, like this:

var delay = 10000;
var url = "https://stackoverflow.com";
var timeoutID = setTimeout(function() {
    window.location.href = url;
}, delay);

note that the result was stored into timeoutID. If, for whatever reason you need to cancel the order, you just need to call

clearTimeout(timeoutID);

score 3 · Answer 7 · edited Jan 31 '18 at 19:47

I have made a simple demo that prompts for X number of seconds and redirects to set url. If you don't want to wait until the end of the count, just click on the counter to redirect with no time. Simple counter that will count down while pulsing time in the midle of the page. You can run it onclick or while some page is loaded.

LIVE DEMO ONLOAD

LIVE DEMO ONCLICK

I also made github repo for this: https://github.com/GlupiJas/redirect-counter-plugin

JS CODE EXAMPLE:

// FUNCTION CODE
function gjCountAndRedirect(secounds, url)
{

        $('#gj-counter-num').text(secounds);

        $('#gj-counter-box').show();

    var interval = setInterval(function()
    {

        secounds = secounds - 1;

        $('#gj-counter-num').text(secounds);

        if(secounds == 0)
        {

            clearInterval(interval);
            window.location = url;
            $('#gj-counter-box').hide();

        }

    }, 1000);

    $('#gj-counter-box').click(function() //comment it out -if you dont want to allo count skipping
    {
        clearInterval(interval);
        window.location = url;

    });
}

// USE EXAMPLE
$(document).ready(function() {
    //var
    var gjCountAndRedirectStatus = false; //prevent from seting multiple Interval

    //call
    $('h1').click(function(){
        if(gjCountAndRedirectStatus == false)
        {
            gjCountAndRedirect(10, document.URL);
            gjCountAndRedirectStatus = true;
        }
    });

});

hydra · Answer 8 · 2019-12-20T18:24:54.773

2

Use setTimeout function with either of the following

// simulates similar behavior as an HTTP redirect
window.location.replace("http://www.google.com");

// simulates similar behavior as clicking on a link
window.location.href = "http://www.google.com";

setTimeout(function(){
   window.location.replace("http://www.google.com");
}, 1000)

source: https://www.sitepoint.com/jquery-redirect-web-page/

edited Dec 20 '19 at 18:24

answered Dec 20 '19 at 16:53

hydra

87
5

How does this solve the second part of the question (_...after a give time period_)? – CraZ Dec 20 '19 at 17:20
1

Updated answer with setTimeout function – hydra Dec 20 '19 at 18:25

score 1 · Answer 9 · answered Dec 20 '19 at 16:45

This is improved @Vicky solution - it has clearInterval() added so it prevents a loop of reloading if the redirect takes too long:

                            $(document).ready(function () {
                                var myTimer = window.setInterval(function () {
                                    var timeLeft = $("#countdown").html();
                                    if (eval(timeLeft) == 0) {
                                        console.log('Now redirecting');
                                        clearInterval(myTimer);
                                        window.location = ("@Html.Raw(HttpUtility.HtmlDecode(redirectUrl))");
                                    } else {
                                        $("#countdown").html(eval(timeLeft) - eval(1));
                                    }
                                }, 1000);
                            });

JQuery Redirect to URL after specified time

9 Answers9

Linked