Ajax on interval

Question

I'm having trouble with lag and script execution.

I have the following code:

$(function(){
    $("#results").html("Loading work order queue...");
    setInterval("showWorkOrders();", 15000)
});

function showWorkOrders()
{
      $.ajax({
          url: '/ajax/job_queue_ajax.php',
          type: 'POST',
          cache: false,
          data: 'update=true',
          success: function(data)
          {
              $("#results").html(data);
              $('span#ref_msg').html('');
          },
          error: function()
          {
              a = new customModal('ajax');
              $("#results").html("<font class='msgDivError'>"+a.ajaxError+"</font>");   
              $('span#ref_msg').html('');
          }
  });
}

My backend PHP (only an example):

$SQL = MySQL_query("SELECT * FROM table")
    while($data = MySQL_fetch_array($SQL))
    {
        //// OUTPUTS A TABLE WITH INFORMATION 
    }

Now, this whole thing executes however with a lot of lag (takes very long to load) and sometimes creates an script error because it took too long to load. If I extend the refresh interval, things start getting better (the lag remains) and I don't get the execution error. I need to have a short interval for what I need, but I cannot figure out an efficient way of doing so. Any suggestions on how to improve this?

Also, after a while of being on the page that has the refresher, the browser becomes extremely slow to the point where it locks...

I would save your output into a variable in the PHP page and only output it once at the bottom of the page. Also, please, don't use mysql_* functions in new code http://bit.ly/phpmsql. They are no longer maintained and are officially deprecated https://wiki.php.net/rfc/mysql_deprecation. — Revent, Apr 15 '13 at 18:50
So have you started any debugging to see where you overall execution time is lagging? Is it in your DB query? Is it generating output in PHP? Is it in downloading that output? How much data are you actually sending>? — Mike Brant, Apr 15 '13 at 18:52
I have done some debugging and from what I see it takes 32 seconds to load 0.82 KB of data... — Dimitri, Apr 15 '13 at 19:08

score 3 · Answer 1 · answered Apr 15 '13 at 18:52

Try this. Start next request only after response from server.

$(function(){ 
    $("#results").html("Loading work order queue...");
    showWorkOrders();
});

function showWorkOrders()
{
      $.ajax({
          url: '/ajax/job_queue_ajax.php',
          type: 'POST',
          cache: false,
          data: 'update=true',
          success: function(data)
          {
              $("#results").html(data);
              $('span#ref_msg').html('');
          setTimeout(showWorkOrders, 15000);

          },
          error: function()
          {
              a = new customModal('ajax');
              $("#results").html("<font class='msgDivError'>"+a.ajaxError+"</font>");   
              $('span#ref_msg').html('');
              setTimeout(showWorkOrders, 15000)
          }
  });
}

This answer was something else when it was originally posted. Then, apparently changed entirely to what the other two answers show. — jfriend00, Apr 15 '13 at 19:13

score 3 · Accepted Answer · answered Apr 15 '13 at 18:52

I would solve it using setTimeout instead:

$(function(){
    $("#results").html("Loading work order queue...");
    showWorkOrders();
});

function showWorkOrders()
{
      $.ajax({
          url: '/ajax/job_queue_ajax.php',
          type: 'POST',
          cache: false,
          data: 'update=true',
          success: function(data)
          {
              $("#results").html(data);
              $('span#ref_msg').html('');
                      setTimeout("showWorkOrders();", 5000)
          },
          error: function()
          {
              a = new customModal('ajax');
              $("#results").html("<font class='msgDivError'>"+a.ajaxError+"</font>");   
              $('span#ref_msg').html('');
                      setTimeout("showWorkOrders();", 5000)
          }
  });
}

This would mean that it waits 5s before doing a new ajax request, the previous one can take however long it wants. Still waits 5s before it tries again.

Better to not pass a string to `setTimeout()`. Better to pass a direction function reference. — jfriend00, May 24 '13 at 05:21

jfriend00 · Answer 3 · 2013-04-15T19:14:56.963

Instead of Ajax on interval, I'd suggest next Ajax after completion.

Since the ajax request takes an indeterminate amount of time to complete, I would suggest that you trigger the next ajax request when the first one completes using setTimeout() and so on like this so that you never have multiple ajax requests going at once and so each subsequent ajax call starts a known time from when the previous one completed.

You probably want to troubleshoot why your server is taking so long to respond to the request, but you can also extend the timeout for the ajax call if your server sometimes takes a long time to respond:

function showWorkOrders()
{
      $.ajax({
          timeout: 15000,
          url: '/ajax/job_queue_ajax.php',
          type: 'POST',
          cache: false,
          data: 'update=true',
          success: function(data)
          {
              $("#results").html(data);
              $('span#ref_msg').html('');
              setTimeout(showWorkOrders, 5000);
          },
          error: function()
          {
              a = new customModal('ajax');
              $("#results").html("<font class='msgDivError'>"+a.ajaxError+"</font>");   
              $('span#ref_msg').html('');
              setTimeout(showWorkOrders, 5000);
          }
  });
}

$(function(){
    $("#results").html("Loading work order queue...");
    showWorkOrders();
});

This would be the correct way to go, considering the asynchronous nature of ECMAScript — the approach of the question author proposes the implementation of a synchronous way, which is way too alien for the Internet. — 19h, Apr 15 '13 at 19:01
Interesting approach. I never thought of adding a timeout up success. — Dimitri, Apr 15 '13 at 19:05

Ajax on interval

3 Answers3

Linked