Question

I have a page that I want to update non stop, every few seconds.

For this, I wrote the following:

var to;
$(function () {
           to = setTimeout(updateDivContent, 2000);
});

function updateDivContent() {

    $('#topbox').load('/home/blabla', null);


    $('#leftgraph').load('/home/blabla', null, function () {

        to = setTimeout(updateDivContent, 2000);
    });
};

This worked, however, it leads to what I presume is a memory leak as after around 15 minutes, the computer almost freezes up with the browser taking up all available memory and CPU.

I am guessing that the Timeout is basically stacking, but, I am not sure how to fix this. I have tried getting rid of the second timeout and putting the first one inside a while(true) loop, but, I just couldn’t get it to work.

Can anyone suggest anything?

Answer 1

This looks fine actually. But if the first Ajax call does not finish within two seconds, it will stack, and this could (don’t know for sure) cause problems.

The timeout itself does not stack, since you are initiating a new one only after the previous one finished.

Try to initiate a new timeout once both Ajax requests finished:

$.when($('#topbox').load('/home/blabla'),
       $('#leftgraph').load('/home/blabla')
).then(function () {
    setTimeout(updateDivContent, 2000);
});

Reference: $.when