Why does my content not load right away when using setInterval to auto update the page?-CodePudding

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);
    });
});

CodePudding user response：

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>';

CodePudding user response：

Solution

$(document).ready(function(){

    jQuery(window).on("load", function(){

     $('#box').load('handle.php');
 
     refreshInterval = setInterval(function(){
        $('#box').load('handle.php');
     },40000);
 
    });
})