Cómo redireccionar a otra página después de un tiempo concreto en Javascript

En este pequeño tutorial te mostraremos cómo redireccionar al usuario a otra página después de un tiempo específico. Esto significa que la redirección se retrasará hasta que pase un tiempo especificado por nosotros mismos. Hay veces que es mejor avisar a los usuarios antes de redireccionarles a otra página. Para ello no necesitas utilizar jQuery, con Javascript puro se puede implementar esta funcionalidad de forma muy sencilla.

En este script que te muestre a continuación, habrá un botón y al hacer clic en dicho botón se mostrará un mensaje con una cuenta atrás (temporizador de la redirección) y el usuario será redirigido a otra página una vez se hayan pasado 5 segundos.

Habiendo dicho esto, vamos a ver cómo implementarlo. ¿Estás listo?

Javascript

Llamaremos a la función delayRedirect() cuando se haga clic al botón. Antes que nada, mostraremos un mensaje con el tiempo que queda hasta la redirección. Después, utilizaremos el método setInterval() de Javascript para evaluar una expresión a intervalos específicos. Una vez la variable count alcanza 0, el usuario será redireccionado.

<script>
function delayRedirect(){
    document.getElementById('delayMsg').innerHTML = 'Please wait you'll be redirected after <span id="countDown">5</span> seconds....';
    var count = 5;
    setInterval(function(){
        count--;
        document.getElementById('countDown').innerHTML = count;
        if (count == 0) {
            window.location = 'https://www.google.com'; 
        }
    },1000);
}
</script>

HTML

Mostraremos el mensaje y la cuenta atrás en el div delayMsg. Llamaremos a la función delayRedirect() cuando se haga clic en el botón de redirección que puedes ver más abajo.

<div id="delayMsg"></div>
<input type="button" onclick="delayRedirect()" value="Click to Redirect"/>

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP