检查是否有一个ajax调用正在进行,我不会触发另一个

时间:2014-02-21 17:06:55

标签: javascript jquery ajax

我有一个像这样的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){

      }
    });
  }

所以我测试这个的方式是我在我的控制器中放置10秒睡眠,并尝试再次单击该按钮,它会发出等待的帖子请求,因为我的服务器可以一次服务一个请求。

但是如果一个请求已经在运行,我想不发送帖子请求,或者如果请求已经在运行,则警告消息。

我该怎么做?

2 个答案:

答案 0 :(得分:2)

创建一个处理自己状态的单例,这样就不会用未使用的变量污染剩下的代码

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

答案 1 :(得分:0)

你应该使用一些标志,如下所示:

var recieved = false;
$.ajax({
    url: "http://first.call/",
})
.done(function( data ) {
    // Do something with that data and enable the flag
    recieved = true;
});

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

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

    if(!recieved) {
        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){

        }
    });
}