Wie verfolgen Sie laufende Ajax-Anfragen?

Question

Ich führe simultane AJAX-Anfrage auf einen Knopfklick aus.

Ich habe eine Tabelle mit einer Liste von Alarmen und jede Zeile hat eine eigene Taste, die einmal geklickt wird versucht, den Alarm in der db zu löschen und dann entferne ich es aus der Tabelle.

Ich kann auf diese Schaltflächen nacheinander klicken und eine Ajax-Anfrage auslösen.

Problem:

lässt ich auf einen Knopf sagen klicken und aus irgendeinem Grund dieser Zeit und der Benutzer nimmt verwaltet noch zu klicken Sie auf eine andere Taste, um eine neue Ajax zu starten.

Ich möchte einen Skriptblock in meinem AJAX-Succes-Methode ONLY ausführen, wenn alle AJAX-Anforderungen im aktuellen Bereich abgeschlossen sind.

Code:

$(".signAlarm") 
    .on("click", 
     function() { 
      var _this = $(this).parents(".alarmRow"); 
      var alarm = { 
       Id: $(_this).data("id") 
      } 
      $.automation.worker.postJson("/Alarm/SigAlarm", 
      JSON.stringify({ alarm }), 
      function (data) { 
       if (!$.automation.worker.ajaxActive()) { 
        // execute this if all the sign alarm attempts are finished        
       } 
       $(_this).remove(); 
      }); 
     }); 

ajaxActive Funktion:

ajaxActive: function() { 
    if ($.active) return true; 

    return false; 
} 

wenn Suche nach einer Antwort ich jquery.active gefunden, die ich oben in dem Versuch verwenden, aber wenn ich überprüfen Sie die jquery.active in meinem Erfolg Methode Es ist "1" und nicht 0, obwohl nur ein Knopfklick gemacht wurde.

Ich überprüfte auch this post, die mich an jquery.active oben aber alos $ .ajaxStart und $ .ajaxStopp denken ließ. Das Problem mit $ .ajaxStart und $ .ajaxStopp und soweit ich verstehe ist, dass sie global sind und ich möchte, dass bestimmte Codes ausgeführt werden, wenn diese Alarme signiert werden und nicht möchten, dass dies auf jeder Seite passiert, wenn ein Ajax ist gemacht.

Wie verwalte ich das?

Answer 1

Nach vielen Nachdenken und für eine Art von Build-in-Funktion in Jquery Suche habe ich beschlossen, einen eigenen Versuch zu machen.

Was ich wollte:

1. Machen Sie mehr Ajax-Anfragen
2. Spur der Menge der Anfrage Dich daran, dass ich in einem bestimmten Umfang habe (nicht global)
3. Skript ausgeführt wird, wenn kein Ajax gemacht wird .

Code:

globale Array:

ajaxRequests: { value: [] } 

vor jeder ajax Anfrage:

$.automation.globals.ajaxRequests.value.push(1); 

nach jeder ajax Anfrage:

clearAjax: function() { 
     $.automation.globals.ajaxRequests.value.splice(-1, 1); 
    } 

Summe ist:

 $(".signAlarm") 
      .on("click", 
       function() { 
        var _this = $(this).parents(".alarmRow"); 
        var alarm = { 
         Id: $(_this).data("id") 
        } 

        $.automation.globals.ajaxRequests.value.push(1); 

        $.automation.worker.postJson("/Alarm/SigAlarm", 
        JSON.stringify({ alarm }), 
        function (data) { 
         $.automation.worker.clearAjax(); 
         if ($.automation.globals.ajaxRequests.value.length === 0) { 
          // all ajax finished, execute code 
         } 
         $(_this).remove(); 
        }); 
       }); 

Answer 2

Verwendung async Eigenschaft von Ajax.

async (default: true) Typ: Boolean

Standardmäßig werden alle Anfragen asynchron gesendet (das heißt ist dies standardmäßig auf true gesetzt). Wenn Sie synchrone Anforderungen benötigen, legen Sie diese Option auf false fest. Domänenübergreifende Anforderungen und dataType: "Jsonp" -Anforderungen unterstützen keine synchrone Operation. Beachten Sie, dass synchrone Anfragen den Browser vorübergehend sperren können, indem Sie alle Aktionen deaktivieren, während die Anfrage aktiv ist. Ab jQuery 1.8, ist die Verwendung von async: false mit jqXHR ($ .Deferred) veraltet; Sie müssen die success/error/complete Callback-Optionen anstelle der entsprechenden Methoden des jqXHR-Objekts wie jqXHR.done() verwenden.

refer this

$.ajax({ 
      url: 'your url', 
      global: false, 
      type: 'POST', 
      data: {}, 
      async: false, //set this false 
      success: function() {} 
     }); 

Answer 3

Sie deferred objects verwenden können.

$('.signAlarm').each(function() { 
    var prom = $.Deferred().resolve(); 
    $(this).click(function() { 
     var _this = $(this).parents(".alarmRow"); 
     var alarm = { 
      Id: $(_this).data("id") 
     }; 
     prom = prom.then(
      function() { 
       return $.post({ 
        'url': '/Alarm/SigAlarm', 
        'data': JSON.stringify(alarm), 
        'contentType': 'application/json' // assuming you want the server to think you're sending json 
       }); 
      } 
     ).done(function() { 
      if (prom.state() === "resolved") { 
       // all ajax finished, execute code 
      } 
      $(_this).remove(); 
     }); 
    }); 
}); 

Ich bin mir nicht sicher, was die $.automation für ist, aber ich werde meine Antwort bearbeiten, wenn er benötigt wird. Beachten Sie auch, wie ich .each() verwende, um einen Bereich zu erstellen, so dass jedes Element mit der Klasse signAlarm einzeln behandelt wird. Sie könnten eine globale prom Variable erstellen, wenn Sie alle Anrufe für alle anklickbaren Elemente teilen möchten.