如何处理ajax对多个功能共享div响应慢的问题

Question

我有一个 div。

<div id="test"></div>

功能少。

fun1()
{
  $('#test').html('');
  $.ajax(function(){
     url : abc/index;
     success : function(response){
      $('#test').html(response);
     }
  });
}
fun2()
{
     $('#test').html('');
     $.ajax(function(){
     url : abc/getDetail;
     success : function(response){
      $('#test').html(response);
     }
  });
}
fun3()
{
 $('#test').html('');
  $.ajax(function(){
     url : abc/getUser;
     success : function(response){
      $('#test').html(response);
     }
  });
}

函数在不同的按钮点击时调用。

btn1.click(fun1())
btn2.click(fun2())
btn3.click(fun3())

当 btn1、btn2、btn3 一个接一个地按下时，我可以看到 div 'test' 包含作为第一个 'fun1' 响应，经过一段时间的 'fun2' 响应等等。

我知道原因，因为我的 ajax 响应非常慢，这就是它发生的原因。

当有人点击 btn1 并且在得到 fun1 的响应之前，按 btn2。在这种情况下，我只想加载 fun2 响应。如果 fun2 正在延迟想要显示空白页。

我正在考虑在按下按钮时终止剩余的 ajax 请求。但同时我的其他 ajax 请求也在进行，我不想杀死那些。 所以杀死其他ajax请求对我不起作用。 其他解决方案是什么。

Answer 1

好的，你有两个问题

1：当您真的只想处理最后一个请求时，您正在触发多个请求

2：无论发生了什么，每个事件都会更新屏幕

我建议你分别解决这两个问题。

首先，为您的响应添加一个回调函数。这将允许您在更新页面之前检查条件（例如“还有其他事情发生吗？”）。这使您有机会将第一个响应扔出去。

其次，您需要首先处理多个请求的发送。您可以在单击第二个按钮时取消它们，（但它们仍将在服务器上处理）或者：您可以添加一个计时器而不立即发送请求。

单击按钮时启动计时器，然后说 200 毫秒？稍后，触发请求并处理响应。

如果您在 200 毫秒内再次点击，请忘记第一个计时器并开始一个新计时器。

或者，您可以通过停用按钮并仅在收到响应后重新激活来阻止用户在发送请求后单击按钮。

例如：（我知道的全局变量有点粗糙）

    var btnLastPressed =0
    fun1()
    {
      btnLastPressed = 1;
      $('#test').html('');
      $.ajax(function(){
         url : abc/index;
         success : function(response) { finished(1,response);}
      });
    }

    function finished(btn, response){
       if(btnLastPressed==1){
          $('#test').html(response);
       }
    }