CODEWITHSUNDEEP
javascriptjqueryajax
xZeasy
xZeasy

Reputation: 132

Multiplying XHR Requests cause web page to slow down

so i have a problem with my PHP page. Basically, i have a countdown timer that counts to 300s, because every 5min i refresh the data on the page without doing a full refresh. The countdown timer restart at 300s after hitting 0s. The problem is that, overtime, there are way too many xhr requests.

After the first five minutes, it only does two requests. The web page, et jquery loading. But after five minutes again (so 10min now), it makes 4 requests : two times the web page, and two times jquery. So we have 6 total requests. And the number of requests keep multiplying ! And it goes on and on every 5 minutes, reaching more than 2000 requests at one hour ! So, it just eat the user's CPU, and it also wait for all to requests to be loaded before starting my countdown timer again, meaning it doesn't refresh the data every 5min like i want to.

Here's the code :

function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element
    .find('div')
    .animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, "linear")
    .html(timeleft + " secondes restantes");
if(timeleft > 0) {
    setTimeout(function() {
        progress(timeleft - 1, timetotal, $element);
    }, 1000);
}
};

progress(300, 300, $('#progress'));

$(document).ready(function() {
var btn = document.createElement("div");
var refreshId = setInterval(function() {
    $("#body").load('/app/phase/dashboard.php?B=winciel');

    }, 300000); // 300000
$.ajaxSetup({ cache: false });
});

And the HTML part :

<link rel="stylesheet" type="text/css" href="./node_modules/bootstrap- 
4/css/bootstrap.css" />
<script src="./node_modules/jquery/dist/jquery.js"></script>

<div id="body">
<div id="progress" style="width: 1000px;margin: 10px auto;height: 
22px;background-color: #0A5F44;">
    <div id="progressBar" class="bar" style="height: 100%;text-align: 
right;padding: 0 10px;line-height: 22px;width: 0;background-color: 
#CBEA00;"></div>
</div>

The "body" div finishes at the end of the page. There's also a tab in there with the refreshed data but i don't think it's needed here.

As you can see on the screenshot, there are 58 requests in 25min, which is a problem. Because there should bo only 2 requests each 5min, it should make (25/5)*2 = 5*2 = 10 requests and not 58.

Thank you in advance for trying to help me !

XHR requests

Upvotes: 0

Views: 181

Answers (1)

Quentin
Quentin

Reputation: 944014

You appear to be using load to load the entire page, including the <script> which triggers the interval.

Each time you load the new data, you start another interval running.

Create an HTTP endpoint that just gives you the data you need, and load it without the scripts and other pages of the page you do not need.

Upvotes: 1

Related Questions