Stoppen Sie doppelte Ajax Submisions?

Question

Ich frage mich, was ist der beste Weg, doppelte Einreichungen zu stoppen, wenn Sie Jquery und Ajax verwenden?

komme ich mit zwei möglichen Wegen, aber nicht sicher, ob diese die einzige 2.en

1. Auf Ajax startet alle Tasten deaktiviert, bis Anfrage erfolgt. 2 Probleme, die ich dabei sehe, ist, dass ich das jquery-Modell-Dialogfeld verwende, so dass ich nicht weiß, wie einfach es wäre, diese Schaltfläche zu deaktivieren, da ich nicht sicher bin, ob sie IDs haben. Zweitens, wenn die Anfrage hängt der Benutzer hat wirklich keine Möglichkeit, es erneut zu versuchen, da alle Tasten deaktiviert sind.

2. Ich bin auf der Suche nach etwas namens AjaxQueue zu diesem Zeitpunkt habe ich keine Ahnung, ob es ist, was ich brauche oder wie es funktioniert seit der Website, wo das Plugin anscheinend für die Wartung ist.

http://docs.jquery.com/AjaxQueue

bearbeiten

Ich denke, das aus einer Spin ist, was auf die ich suchte.

http://www.protofunc.com/scripts/jquery/ajaxManager/

Das einzige Problem, das ich mit diesem ajaxManager sehen ist, dass ich glaube, ich habe alle meine .post $, $, um ihre Art .get und $ .ajax diejenigen zu ändern.

Aber was passiert, wenn ich einen speziellen Parameter von $ .ajax brauche? Oder diese Tatsache mag ich mit .post und .get.

bearbeiten 2

ich denke, es in allen $ .ajax Optionen nehmen. Ich schaue immer noch darauf. Worüber ich mich jedoch nicht sicher bin, ist, dass ich denselben Konstruktor für alle Anfragen verwenden kann, die dieselben Optionen verwenden.

First you have to construct/configure a new Ajaxmanager 
//create an ajaxmanager named someAjaxProfileName 
var someManagedAjax = $.manageAjax.create('someAjaxProfileName', { 
    queue: true, 
    cacheResponse: true 
}); 

Oder muss ich das oben genannte jedes Mal machen?

Answer 1

Wie setzt man ein Flag, wenn der Benutzer auf die Schaltfläche klickt? Sie löschen das Flag nur, wenn die AJAX-Anforderung erfolgreich ausgeführt wurde (in complete, die nach den Callbacks success und error aufgerufen wird). Sie senden nur dann eine AJAX-Anforderung, wenn das Flag nicht gesetzt ist.

In Bezug auf AJAX-Warteschlangen gibt es ein Plugin namens jQuery Message Queuing, das sehr gut ist. Ich habe es selbst benutzt.

var requestSent = false; 

jQuery("#buttonID").click(function() { 
    if(!requestSent) { 
     requestSent = true; 

     jQuery.ajax({ 
     url: "http://example.com", 
     ...., 
     timeout: timeoutValue, 
     complete: function() { 
      ... 
      requestSent = false; 
     }, 
     }); 
    } 
}); 

Sie können einen Timeout-Wert für lang laufende Anfragen gesetzt (Wert in Millisekunden), wenn Sie Ihre Anfrage denken, eine Möglichkeit zu hängen hat. Tritt ein Timeout auf, wird der Callback error aufgerufen, danach wird der Callback complete aufgerufen.

Answer 2

Sie können eine aktive Anfrage in einer Variablen speichern und sie dann löschen, wenn eine Antwort vorliegt.

var request; // Stores the XMLHTTPRequest object 

$('#myButton').click(function() { 
    if(!request) { // Only send the AJAX request if there's no current request 

     request = $.ajax({ // Assign the XMLHTTPRequest object to the variable 
      url:..., 
      ..., 
      complete: function() { request = null } // Clear variable after response 
     }); 

    } 
}); 

EDIT:

Eine nette Sache über dieses ist, dass Sie abort() mit langer Laufzeit-Anfragen abbrechen könnte.

var request; // Stores the XMLHTTPRequest object 
var timeout; // Stores timeout reference for long running requests 

$('#myButton').click(function() { 
    if(!request) { // Only send the AJAX request if there's no current request 

     request = $.ajax({ // Assign the XMLHTTPRequest object to the variable 
      url:..., 
      ..., 
      complete: function() { timeout = request = null } // Clear variables after response 
     }); 

     timeout = setTimeout(function() { 
         if(request) request.abort(); // abort request 
        }, 10000);       // after 10 seconds 

    } 
}); 

Answer 3

$.xhrPool = {}; 
$.xhrPool['hash'] = [] 
$.ajaxSetup({ 
    beforeSend: function(jqXHR,settings) { 
     var hash = settings.url+settings.data 
     if ($.xhrPool['hash'].indexOf(hash) === -1){ 
      jqXHR.url = settings.url; 
      jqXHR.data = settings.data; 
      $.xhrPool['hash'].push(hash); 
     }else{ 
      console.log('Duplicate request cancelled!'); 
      jqXHR.abort(); 
     } 
    }, 
    complete: function(jqXHR,settings) { 
     var hash = jqXHR.url+jqXHR.data 
      if (index > -1) { 
       $.xhrPool['hash'].splice(index, 1); 
      } 
     } 
    });