Javascript 如何为Ajax调用设置Jquery延迟_Javascript_Jquery_Ajax

Javascript 如何为Ajax调用设置Jquery延迟

javascript jquery ajax

Javascript 如何为Ajax调用设置Jquery延迟,javascript,jquery,ajax,Javascript,Jquery,Ajax,我已经回顾了这里关于如何使用deferred编写ajax调用的许多讨论。不知怎的，我只是没有得到我需要做的。出于示例目的，我在这里简化了代码。基本上我有一个带按钮的表单。单击它们有时会触发ajax调用，以便在我的服务器上记录数据。（有时它会发起几个呼叫）问题是，有时我的PHP代码会在第一次调用完成之前执行第二次调用。所以我知道我需要等到收到呼叫1的回复后再发出呼叫2。我有很多可以进行ajax调用的按钮和组合。一个巨大的嵌套块是不可行的所以我想我需要使用.Deferred（）对象。我只是不知道

我已经回顾了这里关于如何使用deferred编写ajax调用的许多讨论。不知怎的，我只是没有得到我需要做的。出于示例目的，我在这里简化了代码。基本上我有一个带按钮的表单。单击它们有时会触发ajax调用，以便在我的服务器上记录数据。（有时它会发起几个呼叫）

问题是，有时我的PHP代码会在第一次调用完成之前执行第二次调用。所以我知道我需要等到收到呼叫1的回复后再发出呼叫2。我有很多可以进行ajax调用的按钮和组合。一个巨大的嵌套块是不可行的

所以我想我需要使用.Deferred（）对象。我只是不知道如何设置它。前面所有的Stackoverflow响应似乎都不适用于我的情况，因为对ajax函数的调用可能来自不同的地方

我只需要一个内部队列，它只需等待一个ajax调用完成，然后再执行下一个ajax调用

这是我的密码：

<html>
<head>
  <script src="jquery.min.js?x=1"></script>
</head>
<body>
<button type="button" id="btn1">Send Ajax 1</button>
<button type="button" id="btn2">Send Ajax 2</button>
<script>
  $("#btn1").click(function(){ send_ajax(1); });
  $("#btn2").click(function(){ send_ajax(2); }); 
  function send_ajax(val){
     var param="param="+val;
    var url = 'save_some_data.php';
    $.ajax({method: "GET", url: url, data: param});   
  }
</script>
</body>
</html>


发送ajax1
发送Ajax 2
$（“#btn1”）。单击（函数（）{send_ajax（1）；}）；
$（“#btn2”）。单击（函数（）{send#u ajax（2）；}）；
函数send_ajax（val）{
var param=“param=”+val；
var url='save_some_data.php'；
$.ajax（{method:“GET”，url:url，data:param}）；
}

基本问题是，如果我快速连续单击#btn1和#btn2，我希望我的代码等待#btn1的响应，直到它发送对#btn2的ajax调用。

好的，我已经更新了我的代码，它几乎可以工作了。前两次点击效果很好。但它在第三次点击时被绊倒了。看起来previousPromise作为对象而不是true/false返回。如何使其返回布尔值

<html>
<head>
  <script src="jquery.min.js?x=1"></script>
</head>
<body>
<button type="button" id="btn1">Send Ajax 1</button>
<button type="button" id="btn2">Send Ajax 2</button>
<script>
var previousPromise=false;
  $("#btn1").click(function(){ handler(1); });
  $("#btn2").click(function(){ handler(2); }); 
  function handler(val){
      if (previousPromise) {
        // Even if the previous request has finished, this will work.
        previousPromise = previousPromise.then(function () {
          return actualSender(val);
        });
        return previousPromise;
      }

      // first time
      previousPromise = actualSender(val);
      return previousPromise;     
  }
  function actualSender(val){
     var param="param="+val;
    var url = 'save_data.php';
    return($.ajax({method: "GET", url: url, data: param}));
  }
</script>
</body>
</html>


发送ajax1
发送Ajax 2
var previousPromise=虚假；
$（“#btn1”）。单击（函数（）{handler（1）；}）；
$（“#btn2”）。单击（函数（）{handler（2）；}）；
函数处理程序（val）{
如果（先前的承诺）{
//即使前一个请求已经完成，这也会起作用。
previousPromise=previousPromise.then（函数（）{
返回实际值（val）；
});
归还先前的承诺；
}
//第一次
以前的承诺=实际收到者（val）；
归还先前的承诺；
}
功能促动器（val）{
var param=“param=”+val；
var url='save_data.php'；
返回（$.ajax（{method:'GET'，url:url，data:param}））；
}

我认为您需要async:false在第一个请求完成之前不执行第二个请求

$.ajax({
    method: "GET", 
    url: url, 
    data: param,
    async: false,   <--- Add this and try again.
});

$.ajax({
方法：“获取”，
url:url，
数据：param，
async:false似乎特别有用。我发现这个JSFIDLE完全符合我的要求-这可能是我遇到的最好的解决方案。它工作得非常好。唯一的问题是async:false的这个功能不受欢迎。我认为“正确”这样做的方法是让我上面的第二套代码正常工作。但到目前为止，运气不好。