间隔Ajax

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

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

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

我会使用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 3

而不是间隔的Ajax，我建议在完成后使用下一个Ajax。

由于ajax请求需要不确定的时间来完成，我建议你在第一个请求完成后使用setTimeout()等时触发下一个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();
});