Redirect Page after a Delay using JavaScript

You can use window.location.href property to redirect or open a page from your JavaScript code. If you want to redirect a page automatically after a delay then you can use the setTimeout() method in JavaScript and it will call the above property after a time delay.

The solution is very simple. The setTimeout() method will call a function or execute a piece of code after a time delay (in millisecond). Here the called function is window.loacation.href, which will have the URL of the page (you wish to redirect).

Here’s the script.

<script>
    // Using ES6 feature.
    let redirect_Page = () => {
        let tID = setTimeout(function () {
            window.location.href = "https://www.encodedna.com/javascript/operators/default.htm";
            window.clearTimeout(tID);		// clear time out.
        }, 5000);
    }

    // Using regular methods.
    /* function redirect_Page () {
        var tID = setTimeout(function () {
            window.location.href = "https://www.encodedna.com/javascript/operators/default.htm";
            window.clearTimeout(tID);		// clear time out.
        }, 5000);
    } */
</script>

Try it

You can call the redirect_Page() on any click event like a button, link etc. The delay is for 5000 milliseconds or 5 seconds.

Using window.open() Method

The window.location.href will open the redirected page on the current window. If you want to redirect page to a new tab or window, you can use window.open() method. For example,

setTimeout(function () {
    window.open('https://www.encodedna.com/javascript/operators/default.htm', '_blank');
}, 5000);

See, now you can set the target (_blank, _self, _top etc.) as you like.

If the objective is to redirect page only after a time delay, then I think this method (using setTimeout()) is ideal. Since, all you have to do is assign a time (in milliseconds) and the method will take care of the rest. It won’t take much time.

However, if the redirection is based on certain condition, lets say, redirect after executing a piece or after completing an operation, then I would recommend using the setInterval() method.

Using setInterval() Method to delay Redirect Page

The setInterval() method is very similar to the setTimeout() method. The execution however, is different.

<script>
    // Using ES6 feature.
    let redirect_Page = () => {
        let iCnt = 3;	// for time in seconds.
        let iTimerId = setInterval(function () {
            iCnt--;     // decrease counter by 1.
            if (iCnt === 0) {
                // now, redirect page.
                window.location.href = 'https://www.encodedna.com/javascript/operators/default.htm';
                clearInterval(iTimerId);		// clear time interval.
            }
        }, 1000);
    }

    // Using regular methods.
    //  function redirect_Page () {
    //      var iCnt = 3;
    //      var iTimerId = setInterval(function () {
    //          iCnt--;
    //          if (iCnt === 0) {
    //              window.location.href = 'https://www.encodedna.com/javascript/operators/default.htm';
    //              clearInterval(iTimerId);		// clear time interval.
    //          }
    //      }, 1000);
    //  }
</script>

Try it

The setInterval() method calls a function every “1000” millisecond. It checks for a condition (the decrement counter, iCnt) and when it reaches value 0, it executes the redirect code.

Remember the Difference

Both the methods do the same thing efficiently. However,

• the setTimeout() method (the first method that I have explained in the post) runs the script at a given time, only once.
• the setInterval() method will repeatedly execute a script at a given time, till it is explicitly stopped.

← PreviousNext →