Zeitlimit für Ajax festlegen (jQuery)

$.ajax({
    url: "test.html",
    error: function(){
        //do something
    },
    success: function(){
        //do something
    }
});

Manchmal successfunktioniert die Funktion gut, manchmal nicht.

Wie stelle ich das Zeitlimit für diese Ajax-Anfrage ein? Beispiel: 3 Sekunden, wenn die Zeit abgelaufen ist, wird ein Fehler angezeigt.

Das Problem ist, dass Ajax Request den Block einfriert, bis er fertig ist. Wenn der Server für einige Zeit nicht verfügbar ist, wird er niemals enden.

Bitte lesen Sie die $.ajax Dokumentation , dies ist ein behandeltes Thema.

$.ajax({
    url: "test.html",
    error: function(){
        // will fire when timeout is reached
    },
    success: function(){
        //do something
    },
    timeout: 3000 // sets timeout to 3 seconds
});

Sie können sehen, welche Art von Fehler ausgelöst wurde, indem Sie auf den Parameter textStatus der error: function(jqXHR, textStatus, errorThrown)Option zugreifen . Die Optionen sind "Timeout", "Fehler", "Abbruch" und "Parsererror".

Hier einige Beispiele, die das Festlegen und Erkennen von Zeitüberschreitungen in den alten und neuen Paradigmen von jQuery veranschaulichen.

Live Demo

Versprechen Sie mit jQuery 1.8+

Promise.resolve(
  $.ajax({
    url: '/getData',
    timeout:3000 //3 second timeout
  })
).then(function(){
  //do something
}).catch(function(e) {
  if(e.statusText == 'timeout')
  {     
    alert('Native Promise: Failed from timeout'); 
    //do something. Try again perhaps?
  }
});

jQuery 1.8+

$.ajax({
    url: '/getData',
    timeout:3000 //3 second timeout
}).done(function(){
    //do something
}).fail(function(jqXHR, textStatus){
    if(textStatus === 'timeout')
    {     
        alert('Failed from timeout'); 
        //do something. Try again perhaps?
    }
});​

jQuery <= 1.7.2

$.ajax({
    url: '/getData',
    error: function(jqXHR, textStatus){
        if(textStatus === 'timeout')
        {     
             alert('Failed from timeout');         
            //do something. Try again perhaps?
        }
    },
    success: function(){
        //do something
    },
    timeout:3000 //3 second timeout
});

Beachten Sie, dass der Parameter textStatus (oder jqXHR.statusText ) Sie über den Fehler informiert. Dies kann hilfreich sein, wenn Sie wissen möchten, dass der Fehler durch eine Zeitüberschreitung verursacht wurde.

Fehler (jqXHR, textStatus, errorThrown)

Eine Funktion, die aufgerufen werden soll, wenn die Anforderung fehlschlägt. Die Funktion erhält drei Argumente: Das Objekt jqXHR (in jQuery 1.4.x, XMLHttpRequest), eine Zeichenfolge, die den aufgetretenen Fehlertyp beschreibt, und ein optionales Ausnahmeobjekt, falls eines aufgetreten ist. Mögliche Werte für das zweite Argument (neben null) sind "timeout", "error", "abort" und "parsererror". Wenn ein HTTP-Fehler auftritt, empfängt errorThrown den Textteil des HTTP-Status, z. B. "Nicht gefunden" oder "Interner Serverfehler". Ab jQuery 1.5 kann die Fehlereinstellung eine Reihe von Funktionen akzeptieren. Jede Funktion wird nacheinander aufgerufen. Hinweis: Dieser Handler wird nicht für domänenübergreifende Skript- und JSONP-Anforderungen aufgerufen.

src: http://api.jquery.com/jQuery.ajax/

Sie können die timeoutEinstellung in den Ajax-Optionen wie folgt verwenden:

$.ajax({
    url: "test.html",
    timeout: 3000,
    error: function(){
        //do something
    },
    success: function(){
        //do something
    }
});

Lesen Sie hier alles über die Ajax-Optionen: http://api.jquery.com/jQuery.ajax/

Denken Sie daran, dass bei einem Timeout der errorHandler ausgelöst wird und nicht der successHandler :)

Verwenden Sie die voll ausgestattete .ajaxjQuery-Funktion. Ein Beispiel finden Sie unter https://stackoverflow.com/a/3543713/1689451 .

Ohne zu testen, führen Sie einfach Ihren Code mit der SO-Frage zusammen, auf die verwiesen wird:

target = $(this).attr('data-target');

$.ajax({
    url: $(this).attr('href'),
    type: "GET",
    timeout: 2000,
    success: function(response) { $(target).modal({
        show: true
    }); },
    error: function(x, t, m) {
        if(t==="timeout") {
            alert("got timeout");
        } else {
            alert(t);
        }
    }
});​