.load performance issue when using in interval

Question

I have a php application, where I .load() extensive content every 2 minutes into div. The browser (I have to build it for IE8) usually starts to slow down after few minutes of reloading the data. I already know the reason - the memory doesn't get rid of the data loaded previously as long as the page itself is loaded.

Is there any way to do this so that the memory doesn't get flooded after few/many reloads?

I found this:

jQuery load() method memory leak?

and cool answer to it here (see full thread https://stackoverflow.com/a/2180355/3424808):

This isn't a full answer, but I quickly found how to fix all my code with minimal changes. In my "base" js class (this is an object which is used on every page for standard button hookups by class name etc) I added the following method which does the check for dupe handlers:

    BindOnce: function(triggerName, fn) {
    function handlerExists(triggerName, theHandler) {
        function getFunctionName(fn) {
            var rgx = /^function\s+([^\(\s]+)/
            var matches = rgx.exec(fn.toString());
            return matches ? matches[1] : "(anonymous)"
        }
        exists = false;
        var handlerName = getFunctionName(theHandler);
        if ($(document).data('events') !== undefined) {
            var event = $(document).data('events')[triggerName];
            if (event !== undefined) {
                $.each(event, function(i, handler) {
                    if (getFunctionName(handler) == handlerName) {
                        exists = true;
                    }
                });
            }
        }
        return exists;
    }
    if (!handlerExists(triggerName, fn)) {
        $(document).bind(triggerName, fn);
    }
}

Then I just invoke it instead of the bind method!

But I can't get that to work (when I rewrite simple working .bind() fn it stops working). Is therea way to achieve this some other way?

Or could anybody help me with the script I posted? Does nothing when I assign it to button. I use the function like:

$('#myButtonID').BindOnce("click", function() {
  alert( "User clicked on 'foo.'" );
});

which works for simple .bind()

EDIT

heres the original .load() thats killing me.

<script type="text/javascript">
var skill = <?php echo json_encode($skill_, JSON_UNESCAPED_UNICODE); ?>;
var skill_final = <?php echo json_encode($skill_final, JSON_UNESCAPED_UNICODE); ?>;
var camp_final = <?php echo json_encode($camp_final, JSON_UNESCAPED_UNICODE); ?>;
var jmeno = <?php echo json_encode($jmeno_, JSON_UNESCAPED_UNICODE); ?>;
var pozice = <?php echo json_encode($pozice_, JSON_UNESCAPED_UNICODE); ?>; 
var delka = <?php echo json_encode($delka_, JSON_UNESCAPED_UNICODE); ?>;
var opravneni = <?php echo json_encode($opravneni, JSON_UNESCAPED_UNICODE); ?>;

$(document).ready(function(){
  refreshPrehled();
});
function refreshPrehled(){
  $('#checkboxes').load('load_prehled.php', {
    skill: skill,
    skill_final: skill_final,
    camp_final: camp_final,
    jmeno: jmeno,
    pozice: pozice,
    delka: delka,
    opravneni: opravneni
  }, function(){
    setInterval(refreshPrehled, 120000);
  });
}
</script>

`Reloading` suggests that you are loading the same data multiple times. Can't you keep track on the server of what has been loaded already and only send the new / changed stuff? — jeroen, Apr 28 '14 at 21:32
@jeroen I have a script that rewrites few .txt with updated data every 2 minutes and based on that I restructure the table. — IRMA, Apr 28 '14 at 21:37
Can you show the code you are actually using? what version of jQuery are you using? currently this looks like an x/y problem, you have problem x, and tried to solve it with y, and are trying to figure out why y doesn't work when you really should be looking at x. http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem — Kevin B, Apr 28 '14 at 21:49
@Kevin B Good point, I added the original .load() script thats making me trouble. JQ 1.8.2 — IRMA, Apr 28 '14 at 21:54
See, now i see the problem immediately. every 120000ms, you're starting a NEW setInterval. So the first time it happens it'l run the ajax once, the second time twice, the third time 4 times, and so on. — Kevin B, Apr 28 '14 at 21:54

score 2 · Accepted Answer · answered Apr 28 '14 at 21:55

2

You're re-creating the setInterval on each call of the function, you should instead be using a setTimeout. Using your current code, the first call of the function will send one ajax request, then after 120000ms it will be executed twice, then 120000ms later it'll be executed 4 times, and so on. using setTimeout instead stops that because it only executes the function once.

$(document).ready(function(){
    refreshPrehled();
});
function refreshPrehled(){
    $('#checkboxes').load('load_prehled.php', {
        skill: skill,
        skill_final: skill_final,
        camp_final: camp_final,
        jmeno: jmeno,
        pozice: pozice,
        delka: delka,
        opravneni: opravneni
    }, function(){
        setTimeout(refreshPrehled, 120000);
    });
}

answered Apr 28 '14 at 21:55

Kevin B

92,700
15
158
170

And with setTimeout it won't flood memory? Or slow down anyhow after like 30 reloads? – IRMA Apr 28 '14 at 22:02
Theoretically it won't, pending on what load_prehled.php returns of course. Test it with a smaller delay, say, 10 seconds and leave it up for an hour while monitoring the memory. – Kevin B Apr 28 '14 at 22:04
yee... I had Timeout there before but it didn't work for some other part of page so I tried different interval calls and probably misread the situation. Thanks for your help mate! :) Keep it amazing here <3 – IRMA Apr 28 '14 at 22:08
You helped me with my thing and also taught me that I was looking whole day for right answer to wrong question. Thank you for your help, have a great day! :) – IRMA Apr 29 '14 at 19:06

.load performance issue when using in interval

1 Answers1