javascript - 检查一个 ajax 调用是否正在进行，我不会触发另一个

Question

我有一个像这样的 javascript 函数:

addGas = function(options){
    var working = false;

    $(document).ajaxSend(function(event, jqxhr, settings) {
      if (settings.url == '/add_gas') {
        working = true;        
      }
    });

    if(working) {
      return;
    }

    $.ajax({
      url: options.url,
      data: options,
      type: "POST",
      success: function(data, textStatus, jqXHR){
        $(".btn").addClass("added").text(" Added gas ").prepend("<i></i>");
      },
      error: function(jqXHR, textStatus, errorThrown){

      }
    });
  }

所以我测试这个的方法是让我的 Controller 休眠 10 秒，然后尝试再次单击按钮，它会发出正在等待的发布请求，因为我的服务器一次可以处理一个请求。

但是我不想在已经运行的情况下发送 post 请求，或者在请求已经运行时提醒消息。

我该怎么做？

Answer 1

创建一个处理自己状态的单例，这样你就不会用未使用的变量污染其余代码

gasHandlerBuilder = function(){
  var ajaxInProgress = false;
  return { 
    add_gas: function(options){
      if(ajaxInProgress){ return; };
      ajaxInProgress = true;
      $.ajax({
        url: options.url,
        data: options,
        type: "POST",
        success: function(data, textStatus, jqXHR){
          ajaxInProgress = false;
          $(".btn").addClass("added").text(" Added gas ").prepend("<i></i>");
        },
        error: function(jqXHR, textStatus, errorThrown){
          ajaxInProgress = false;
        }
      });
    }
  }
}

var gasHandler = gasHandlerBuilder();
gasHandler.add_gas(options);