How To Redirect Page After Delay Javascript

0 Sales

Free

In this short JavaScript tutorial, we'll demonstrate how to redirect the page after a specified time. Means, redirecting the page will delay some of the specified times. Sometimes, before redirecting to another page, you needed to display a message to the users. You don't need to use jQuery to do this, you can easily implement this feature using JavaScript.

In our example script, we will display a button and, by clicking on this button, the message will be shown with a countdown (redirect timer) and the page will be redirected after 5 seconds. Continue redirecting the site after delay using the JavaScript tutorial.

JavaScript

DelayRedirect() would be called by clicking the button. In the first place, we will display the message with delay times. After that, we will use the JavaScript setInterval() method to evaluate the expression at the specified intervals. If the number variable is reached 0, the user will be redirected.

<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

Text and countdown are shown in delayMsg div. DelayRedirect() function is invoked when the Redirect button is pressed.

<div id="delayMsg"></div>

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