web-dev-qa-db-fra.com

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

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

Parfois, la fonction success fonctionne bien, parfois non.

Comment définir le délai d'expiration pour cette demande ajax? Dans l'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 arrêté pendant un certain temps, il ne finira jamais.

javascriptjqueryhtmlcssajax
173
James

Veuillez lire le $.ajaxdocumentation , 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'option error: function(jqXHR, textStatus, errorThrown). Les options sont "timeout", "error", "abort" et "parsererror".

296
Intelekshual

Voici quelques exemples illustrant la définition et la détection de délais 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 textStatus param (ou jqXHR.statusText ) vous laissera savoir quelle était l'erreur. Cela peut être utile si vous souhaitez savoir que la défaillance a été provoquée par un dépassement de délai.

erreur (jqXHR, textStatus, errorThrown)

Une fonction à appeler si la requête é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 survenue et un objet exception facultatif, le cas échéant. Les valeurs possibles pour le deuxième argument (outre null) sont "timeout", "erreur", "abort" et "parsererror". Lorsqu'une erreur HTTP se produit, errorThrown reçoit la partie textuelle de l'état HTTP, telle que "Introuvable" ou "Erreur de serveur interne". À partir de jQuery 1.5, le paramètre d'erreur peut accepter un tableau de fonctions. Chaque fonction sera appelée à tour de rôle. Remarque: Ce gestionnaire n'est pas appelé pour les requêtes de script interdomaine et JSONP.

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

108
Brandon Boone

Vous pouvez utiliser le paramètre timeout 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/

Rappelez-vous que lorsqu'une temporisation survient, le gestionnaire error est déclenché et non le gestionnaire success :)

22
Martin Jespersen

utilisez la fonction complète .ajax jQuery. comparez avec https://stackoverflow.com/a/3543713/1689451 pour un exemple.

sans test, il vous 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);
        }
    }
});​
2
Rudolf Mühlbauer