In JavaScript, there are situations when we need to ensure that the entered content on a particular site is accurate and up to date. For instance, it is required to display the most recent content on a web page while filling out a lengthy form and observing the new changes or when you want to test a website. In such cases, auto-refreshing a web page every 5 seconds using JavaScript is very helpful in coping with these types of situations.
This article will discuss the methods to auto refresh a web page every 5 seconds using JavaScript.
How to Auto Refresh Web Page Every 5 Seconds Using JavaScript?
To auto refresh a web page every 5 seconds using JavaScript, the following approaches can be utilized:
Go through the discussed methods one by one!
Method 1: Auto Refresh Web Page Every 5 Seconds in JavaScript Using setInterval() and document.querySelector() Methods
The “setInterval()” method accesses a function at specified time interval and the “document.querySelector()” method gets the first element matching a CSS selector. These methods can be used in combination to access the specific heading tag and set the time interval to a required functionality with the help of a timer.
Syntax
In the above syntax, “function” refers to the function that needs to be accessed, “milliseconds” is the specific time interval to execute, and “par1” and “par2” are the additional parameters.
Here, “CSS selectors” represent one or more than one CSS selectors.
Check out the following example.
Example
First, specify a title and a heading in the <title> and <h2> tags, respectively:
Now, set a timer value as “1”:
After that, apply the “setInterval()” method with a “1000ms” value. This will increment the timer every second. Also, access the specified heading to display it on the “Document Object Model(DOM)” upon the end of the set timer value.
Finally, iterate the value of timer with the increment of “1” using “++” post-increment operator and apply a condition in such a way that if the value exceeds 5, the “location.reload()” method will result in the reloading of the window:
document.querySelector('h2').innerText= timer;
timer++;
if(timer >5)
location.reload();
}, 1000);
It can be seen that our web page gets auto refresh every five seconds:
Method 2: Auto Refresh Web Page Every 5 Seconds in JavaScript Using onload Event
The “onload” event is triggered when an object has been loaded. This technique can be implemented to refresh the page with the help of a user-defined function when the web page is loaded.
Syntax
In the given syntax, “function” refers to the function that needs to be invoked when the object is loaded.
Look at the following example.
Example
Firstly, include a title and heading as discussed in the previous method:
Now, apply the “onload” event and invoke the function “refreshPage()” and pass “5000” as argument which indicates five seconds time interval:
</body>
Lastly, define a function named “refreshpage()” with “t” as an argument which is referring to the set time for auto refreshing the web page. The “location.reload()” method will reload the page after the specified time:
setTimeout("location.reload(true);", t);
}
Output
Method 3: Auto Refresh Web Page Every 5 Seconds in JavaScript Using setTimeout() method
The “setTimeout()” method invokes a function after a specified set time. This method can be applied to reload a web page after a specific set timeout.
Syntax
In the given syntax, “function” refers to the function to be accessed, “milliseconds” is the specific time interval to execute, and “par1”, “par2” are the additional parameters.
Example
In the script tag of the HTML page, apply the “setTimeout()” method in such a way when 5 seconds get passed, the location.reload() method reloads the web page:
setTimeout("location.reload(true);", 5000);
</script>
Output
We have discussed all the convenient methods to auto refresh a web page every 5 seconds using JavaScript.
Conclusion
To auto refresh a web page every 5 seconds using JavaScript, utilize the “setInterval()” and “document.querySelector()” methods for adjusting the timer value, the “refresh()” method for refreshing a web page, or the “setTimeout()” method for setting a specific timeout refresh limit of a web page. This article demonstrated the methods to auto refresh a web page every 5 seconds using JavaScript.
