Redirect page after delay using JavaScript

In this short JavaScript tutorial, we’ll show how to redirect page after some specified time. Means, page redirect will delay for some specified times. Sometimes you needed to display some message to the users before redirecting to the another page. You don’t need to use jQuery for doing it, using JavaScript you can easily implement this functionality.

In our example script, we’ll display a button and clicking on this button the message would be shown with a countdown (redirect timer) and the page would be redirected after 5 seconds. Let’s start redirect page after delay using JavaScript tutorial.

JavaScript

delayRedirect() function would be called on button click. At first, we’ll display the message with delay times. After that, we’ll use JavaScript setInterval() method to evaluate an expression at specified intervals. Once the count variable is reached 0, the user would 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

The message and countdown are displays in delayMsg div. delayRedirect() function is invoked when Click to Redirect is clicked.

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