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

Question

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

So what you want to achieve is whenever a user loads your page for the first time, the contents of handle.php will load on the initial load, and for next requests afterwards you want to load the contents of handle.php after 40 seconds. Please correct me If my understanding is wrong — AR. Arif, Jun 03 '22 at 06:47
So the solution would be easy. You can set a cookie or set a value in localStorage for the first time and whenever user loads second time you will check if the user has that cookie or localStorage value. If cookie/localStorage value exits you load it after 40 sec or you load it on initial request. Do you want me to give a exact code what you want? But if you understand the concept I think you can do it by yourself — AR. Arif, Jun 03 '22 at 06:50
@AR.Arif I would appreciate that! If you can comment on what is going on that would be helpful too, still learning — John Doe, Jun 03 '22 at 06:52
Does this answer your question? [Execute the setInterval function without delay the first time](https://stackoverflow.com/questions/6685396/execute-the-setinterval-function-without-delay-the-first-time) — Lapskaus, Jun 03 '22 at 08:23

score 1 · Answer 1 · answered Jun 03 '22 at 09:29

1

Solution

$(document).ready(function(){

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

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

answered Jun 03 '22 at 09:29

Joukhar

724
1
3
18

score 0 · Answer 2 · answered Jun 03 '22 at 07:06

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

@John Doe, please run this code in your PHP server & you will get the exact functionality you wanted. If it helps please give a upvote and accept the answer so it will help others — AR. Arif, Jun 03 '22 at 07:07

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

2 Answers2