-1

While loading content from different sources on the same web server (using jQuery's load function), GIF animations and input fields get stuck.

<script>
$(document).ready(function(){
  $("#wunschbox").load('addons/wunschbox.php')
  setInterval(function(){
    $("#wunschbox").load('addons/wunschbox.php')
  }, 4000);
});
</script>

I think the client (browser) gets in trouble because of the mass of load requests. On my old Laptop the problem is more intense than my desktop pc.

Do you have any ideas, how to solve this?

Is there a more performant way to handle it?

Screenshot of Chrome Network timeline during this problem

jasonmp85
  • 6,749
  • 2
  • 25
  • 41
Felix Lenz
  • 11
  • 1
  • Can you determine whether $.load() is asynchronous or synchronous? (I was going to suggest using asynchronous ajax instead, but load() might use ajax underneath.) And how long does it take for the wunschbox.php script to respond? – rrauenza May 25 '16 at 19:20
  • .load() is a jquery shorthand method, using ajax. How can i determine, if it is asynchronous or synchronous? There are 8 scripts, i load every 4 seconds. The Time to the first byte takes 88ms - 1 second. While this time, all gif animations stuck, and i can not type in input-fields. The townload time is very short (0.5 ms) – Felix Lenz May 25 '16 at 19:27
  • If it uses ajax, it is asynchronous. It should start the GET, release control back to the browser, and then call your function when the GET finishes. – rrauenza May 25 '16 at 20:30
  • it does, but as i said, during the TTFB the whole website "freeze" :( do i have to put the code on a specific position in the sourcecode? – Felix Lenz May 25 '16 at 21:27
  • How big is the output from your php script? Maybe it is spending time processing the output. Your other option instead of polling is to use some kind of websocket to listen for notifications when the wunschbox needs an update, and then query the php. – rrauenza May 25 '16 at 21:35
  • For this test, i changed the code of the "wunschbox.php" to: . The first few calls are very fast, and after the 3rd or 4th call it get's slower. Waiting (TTFB): 840ms, download 0.5ms During these 840ms the website "freeze" – Felix Lenz May 25 '16 at 21:43
  • Another option is to use ajax explicitly and time how long the .html() call takes to replace the text. I also wonder what would happen if you used setTimeout() instead (and reset after a succesfull refresh) -- is it possible some php calls are taking longer and you're stacking up async load()'s? Does your app server show lots of stacked up requests? – rrauenza May 25 '16 at 21:46
  • 1st i will try it with setTimeout() after that, i try to use ajax explicitly. After that, i will have a look on the webserver ;) I'll give a feedback this night! Thanks for your answers! – Felix Lenz May 25 '16 at 21:53

1 Answers1

1

Here is what I'm worried about with your current implementation.

You call load(), which seems to set up an ajax asynchronous request, that when finished will set the .html() of the element to the contents.

Now you do this every four seconds. This event happens regardless of whether your previous load() actually completed (I assume $().load(..) returns immediately?). So you are potentially stacking up more and more ...

What if instead you did...

function wunschbox() {
    $("#wunschbox").load('addons/wunschbox.php', function() {
        setTimout(wunschbox, 4000)
    });
}

$(document).ready(function(){
    wunschbox();
});
rrauenza
  • 6,285
  • 4
  • 32
  • 57
  • i think, you are right! i just found this article: http://stackoverflow.com/questions/729921/settimeout-or-setinterval i'll try it, when i'm at home in 30 minutes! :D – Felix Lenz May 25 '16 at 21:59
  • The important part is using the callback of the load to then start another timer. This ensures you only have one pending wunschbox.php at a time. – rrauenza May 25 '16 at 22:05
  • I replaced all `setInterval` functions with the `setTimeout` function. as described by @rrauenza . I think that was a good hint. But that didn't solved the problem. I found the "guilty script" while staring at the "Chrome Network Timeline". Everytime i call the script "shoutbox.php", there is a second call to a large file, i don't need. So it was my fault and i have to edit the "shoutbox.php". Thank you so much for your help! – Felix Lenz May 26 '16 at 10:52