Ajax on interval

Question

我遇到了延迟和脚本执行的问题。

我有以下代码：

$(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 
    }

现在，整个程序的执行都有很大的延迟(加载需要很长时间)，有时还会因为加载时间太长而产生脚本错误。如果我延长刷新间隔，事情开始变得更好(延迟仍然存在)，并且我不会得到执行错误。我需要一个很短的间隔来满足我的需求，但我找不到一种有效的方法来做到这一点。对如何改进这一点有什么建议吗？

此外，在具有刷新器的页面上停留一段时间后，浏览器会变得非常慢，甚至锁定……

Answer 1

我会使用setTimeout来解决这个问题：

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

这意味着在执行新的ajax请求之前，它将等待5秒，前一个请求可以花费它想要的任何时间。在重试之前仍然等待5秒。

Answer 2

尝尝这个。仅在服务器响应后启动下一个请求。

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

Answer 3

我建议在完成后使用下一个Ajax，而不是在interval上使用Ajax。

由于ajax请求需要不确定的时间才能完成，因此我建议您在第一个ajax请求完成时触发下一个ajax请求，就像这样，这样就不会有多个ajax请求同时进行，因此每个后续ajax调用都会从前一个调用完成后的已知时间开始。

您可能希望解决服务器响应请求花费这么长时间的问题，但如果服务器有时需要很长时间响应，您也可以延长ajax调用的超时时间：

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