指定时间后 JQuery 重定向到 URL答案

【问题标题】：JQuery Redirect to URL after specified time指定时间后 JQuery 重定向到 URL
【发布时间】：2011-11-08 18:04:21
【问题描述】：

有没有办法在给定时间段后使用 JQuery 重定向到特定 URL？

【问题讨论】：

你应该接受正确的答案...
如果你想要跨浏览器和 seo 支持：redirect generator

【解决方案1】：

将 setTimeout 函数与以下任一一起使用

// 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)

来源： https://www.sitepoint.com/jquery-redirect-web-page/

【讨论】：

这如何解决问题的第二部分（...经过一段时间）？
使用 setTimeout 函数更新答案

【解决方案2】：

这是改进的@Vicky 解决方案 - 它添加了 clearInterval() ，因此如果重定向时间过长，它可以防止重新加载循环：

                            $(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);
                            });

【讨论】：

【解决方案3】：

$(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);
});

【讨论】：

我不鼓励使用eval()，因为它有许多危险的后果。相反，我建议使用parseInt()。
唯一的问题是，如果重定向没有很快发生，它会一直重定向并且永远不会到达目标页面

【解决方案4】：

我做了一个简单的演示，提示输入 X 秒数并重定向到设置 url。如果您不想等到计数结束，只需单击计数器即可立即重定向。简单的计数器，在页面中间脉冲时间时会倒计时。您可以在单击或加载某些页面时运行它。

LIVE DEMO ONLOAD

LIVE DEMO ONCLICK

我还为此制作了 github repo： https://github.com/GlupiJas/redirect-counter-plugin

JS 代码示例：

// 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;
        }
    });

});

【讨论】：

【解决方案5】：

是的，解决方法是使用setTimeout，像这样：

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

请注意，结果存储在timeoutID 中。如果您出于某种原因需要取消订单，您只需致电

clearTimeout(timeoutID);

【讨论】：

【解决方案6】：

您可以使用setTimeout() 函数：

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

【讨论】：

【解决方案7】：

你可以使用

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

【讨论】：

【解决方案8】：

只需使用：

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

.. '4000' 是 m.second

【讨论】：

【解决方案9】：

您实际上并不需要 jQuery。您可以使用 setTimeout 方法使用纯 javascript 来完成此操作：

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

【讨论】：