如何为 Ajax 调用设置延迟的 Jquery答案

【问题标题】：How to Setup Jquery Deferred for Ajax Calls如何为 Ajax 调用设置延迟的 Jquery
【发布时间】：2019-05-13 19:34:25
【问题描述】：

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

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

所以我想我需要使用 .Deferred() 对象。我只是不确定如何设置它。所有以前的 Stackoverflow 响应似乎都不适用于我的情况，即对我的 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>

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

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

<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>

【问题讨论】：

This 似乎特别有用。
我找到了这个 jsfiddle，它完全符合我的要求 - jsfiddle.net/1337/9TG8t/86

标签： javascript jquery ajax

【解决方案1】：

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

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

【讨论】：

这可能是我遇到的最好的解决方案。它完美地工作。唯一的问题是 async: false 的这个特性已被弃用。我认为“正确”的做法是让我上面的第二组代码工作。但到目前为止，没有运气。