程序执行时为什么会有很大的延迟？

我在lag和脚本执行方面遇到了问题。

有如下代码：

$(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('');
          }
  });
}

我的后端PHP(仅举一个例子)：

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

现在，整个程序执行时会有很大的延迟(加载需要很长时间)，有时会创建一个脚本错误，因为加载时间太长了。如果我延长刷新间隔，滞后仍然存在，并且我不会得到执行错误。我需要一个很短的间隔来满足我的需要，但我想不出一个有效的方法。关于如何改进这一点，有什么建议吗？

另外，在有刷新器的页面上停留了一段时间之后，浏览器变得非常慢，以至于它锁定了......

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)
          }
  });
}

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.

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();
});