Définir le délai d'expiration pour ajax (jQuery)

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

Parfois, la successfonction fonctionne bien, parfois non.

Comment définir un délai d'expiration pour cette demande ajax? Par exemple, 3 secondes, si le temps est écoulé, affichez une erreur.

Le problème est que la requête ajax gèle le bloc jusqu'à la fin. Si le serveur est en panne pendant un certain temps, il ne s'arrêtera jamais.

Veuillez lire la $.ajax documentation , ceci est un sujet couvert.

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

Vous pouvez voir quel type d'erreur a été généré en accédant au paramètre textStatus de l' error: function(jqXHR, textStatus, errorThrown)option. Les options sont "timeout", "error", "abort" et "parsererror".

Voici quelques exemples qui illustrent la définition et la détection des délais d'expiration dans les anciens et nouveaux paradigmes de jQuery.

Live Demo

Promesse avec 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
});

Notez que le paramètre textStatus (ou jqXHR.statusText ) vous indiquera quelle était l'erreur. Cela peut être utile si vous voulez savoir que l'échec a été causé par un délai d'attente.

erreur (jqXHR, textStatus, errorThrown)

Une fonction à appeler si la demande échoue. La fonction reçoit trois arguments: l'objet jqXHR (dans jQuery 1.4.x, XMLHttpRequest), une chaîne décrivant le type d'erreur qui s'est produite et un objet d'exception facultatif, le cas échéant. Les valeurs possibles pour le deuxième argument (en plus de null) sont "timeout", "error", "abort" et "parsererror". Lorsqu'une erreur HTTP se produit, errorThrown reçoit la partie textuelle de l'état HTTP, telle que «Not Found» ou «Internal Server Error». À partir de jQuery 1.5, le paramètre d'erreur peut accepter un tableau de fonctions. Chaque fonction sera appelée à son tour. Remarque: ce gestionnaire n'est pas appelé pour les requêtes de script inter-domaines et JSONP.

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

Vous pouvez utiliser le timeoutparamètre dans les options ajax comme ceci:

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

Lisez tout sur les options ajax ici: http://api.jquery.com/jQuery.ajax/

N'oubliez pas que lorsqu'un timeout se produit, le errorgestionnaire est déclenché et non le successgestionnaire :)

utilisez la .ajaxfonction jQuery complète . comparer avec https://stackoverflow.com/a/3543713/1689451 pour un exemple.

sans test, il suffit de fusionner votre code avec la question SO référencée:

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