it-swarm.com.de

Zeitlimit für Ajax festlegen (jQuery)

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

Manchmal funktioniert die Funktion success gut, manchmal nicht.

Wie lege ich ein Timeout für diese Ajax-Anforderung fest? In Beispiel 3 Sekunden, wenn die Zeit abgelaufen ist, wird ein Fehler angezeigt.

Das Problem ist, dass ajax request den Block bis zum Ende einfriert. Wenn der Server für kurze Zeit nicht verfügbar ist, wird er niemals enden.

173
James

Bitte lesen Sie den $.ajaxDokumentation , 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 feststellen, welcher Fehlertyp ausgelöst wurde, indem Sie auf den Parameter textStatus der Option error: function(jqXHR, textStatus, errorThrown) zugreifen. Die Optionen sind "Timeout", "Fehler", "Abbruch" und "Parsererror".

296
Intelekshual

Im Folgenden finden Sie einige Beispiele zum Festlegen und Erkennen von Zeitüberschreitungen in den alten und neuen Paradigmen von jQuery.

Live Demo

Versprechen 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 Sie mit dem Parameter textStatus (oder jqXHR.statusText ) dazu berechtigt sind weiß, was der Fehler war. Dies kann hilfreich sein, wenn Sie wissen möchten, dass der Fehler durch eine Zeitüberschreitung verursacht wurde.

error (jqXHR, textStatus, errorThrown)

Eine Funktion, die aufgerufen werden soll, wenn die Anforderung fehlschlägt. Die Funktion empfängt 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 der Reihe nach aufgerufen. Hinweis: Dieser Handler wird nicht für domänenübergreifende Skript- und JSONP-Anforderungen aufgerufen.

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

108
Brandon Boone

Sie können die Einstellung timeout 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 error -Handler ausgelöst wird und nicht der success -Handler :)

22

benutze das voll funktionsfähige .ajax jQuery-Funktion. Vergleiche mit https://stackoverflow.com/a/3543713/1689451 für ein Beispiel.

ohne zu testen, nur den Code mit der referenzierten SO frage zusammenführen:

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);
        }
    }
});​
2