I have the below code, which works perfectly to automatically update the page. However, during the initial page load it takes 40 seconds before the fetched content appears on the page. How can I make the content appear immediately during the initial load then update after 40 seconds?
$(document).ready(function(){
jQuery(window).on("load", function(){
refreshInterval = setInterval(function(){
$('#box').load('handle.php');
},40000);
});
});
Solution
$(document).ready(function(){
jQuery(window).on("load", function(){
$('#box').load('handle.php');
refreshInterval = setInterval(function(){
$('#box').load('handle.php');
},40000);
});
})
Here is the exact code that you need.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>Stack overflow answer</h1>
<div id="box"></div>
<script>
$(document).ready(function() {
const userAlreadyVisited = localStorage.getItem('visited');
// After the first load it will load the content from handle.php after 2 second every time
if (userAlreadyVisited) {
jQuery(window).on("load", function() {
setTimeout(() => {
$('#box').load('handle.php');
}, 5000);
});
} else {
// The content of handle.php will be loaded immediately after the page load
localStorage.setItem('visited', true);
jQuery(window).on("load", function() {
$('#box').load('handle.php');
});
}
})
</script>
</body>
</html>Here is the handle.php file content
<?php
echo '<h3>Data from handle.php</h3>';