阻止 ajax 请求直到之前完成 - Javascript

在Web应用程序中，Ajax可以使网页与服务器进行异步通信，但是有时需要阻止下一个Ajax请求在前一个请求完成之前发送。这种情况下，可以使用以下技巧来阻止Ajax请求：

1. 使用全局变量

可以使用一个全局的标志变量来记录前一个Ajax请求是否已完成。在Ajax请求开始时，检查这个标志变量。如果前一个请求还没有完成，那么就需要等待前一个请求完成，才能继续发送下一个请求。以下是一个简单的示例：

var isAjaxInProgress = false;
    
function sendAjaxRequest() {
  if (isAjaxInProgress) {
    // Front ajax request is in progress. Do nothing.
    return;
  }
  
  isAjaxInProgress = true;
  
  $.ajax({
    url: "someurl",
    success: function() {
      isAjaxInProgress = false;
      // Handle success response here.
    },
    error: function() {
      isAjaxInProgress = false;
      // Handle error response here.
    }
  });
}

2. 禁用按钮

可以在前一个Ajax请求开始时禁用按钮，在请求完成或出现错误时启用按钮。这种方法可以确保用户只能一次性地执行单个Ajax请求。以下是一个示例：

function sendAjaxRequest() {
  var $button = $("#myButton");
  
  $button.prop("disabled", true);
  
  $.ajax({
    url: "someurl",
    success: function() {
      $button.prop("disabled", false);
      // Handle success response here.
    },
    error: function() {
      $button.prop("disabled", false);
      // Handle error response here.
    }
  });
}

3. 使用Promise

可以使用Promise来管理Ajax请求的并发，确保只有一个请求是活动的。以下是一个示例：

var ajaxPromise = Promise.resolve();
    
function sendAjaxRequest() {
  ajaxPromise = ajaxPromise.then(function() {
    return $.ajax({
      url: "someurl"
    });
  })
  .then(function(response) {
    // Handle success response here.
    return response;
  })
  .catch(function(error) {
    // Handle error response here.
    throw error;
  });
}

4. 使用JavaScript库

一些JavaScript库如jQuery和AngularJS提供了内置的方法来处理并发Ajax请求。例如，jQuery提供了$.when()和$.then()方法来处理多个Ajax请求。以下是一个示例：

function sendAjaxRequest() {
  var ajax1 = $.ajax({
    url: "url1"
  });
  
  var ajax2 = $.ajax({
    url: "url2"
  });
  
  $.when(ajax1, ajax2)
  .done(function(response1, response2) {
    // Handle success response here.
  })
  .fail(function(error1, error2) {
    // Handle error response here.
  });
}

以上是一些技巧可以阻止Ajax请求直到前一个请求完成。可以根据具体情况选择其中一个或多个方法。