jQuery Ajax, setInterval() et Internet Explorer

Mes requêtes ajax ne passent pas sous IE alors qu’avec Firefox et Chrome aucun problème. Ce genre de cas de figure, lorsqu’on y est confronté peut devenir un vrai casse tête… quand on ne sait pas où chercher.

Récemment j’ai travaillé sur un projet de taille dans lequel étaient générées des requêtes ajax, en boucle tant que la réponse n’était pas celle attendue. Grossomodo, ça ressemblait à ça :

// Mon timer qui lance la requete ajax toutes les secondes
var timer = setInterval(function(){
    request()
}, 1000);

// Tant que la response n'est pas success, on recommence
function request() {
    $.ajax({
        url,
        data,
        success: function(response) {
            if(response === 'success')
                clearInterval(timer);
        }
    });
}

Sauf que setInterval() s’exécute toutes les secondes, peu importe que la requête ait aboutie ou pas. Traduction, si la requête met plus d’une seconde à s’exécuter, mon timer s’exécutera quand même, et donc on aura des requêtes multiples. Et ça, bah IE, il aime pas.

En réalité dans ce genre de cas, c’est setTimout() qu’il faut utiliser en lieu et place de setInterval().

// Mon timer qui lance la requete ajax toutes les secondes
var timer = setTimeout(function(){
    request()
}, 1000);

A la difference de setInterval(), setTimeout() ne s’exécute qu’une fois que la requête a retourné une réponse. Du coup l’interval entre les requêtes peut varier, en fonction de la vitesse à laquelle les réponses sont renvoyées, mais au moins pas de risque de voir des requêtes croisées, et hop ! plus de caca nerveux de IE.

Alors bon, j’ai quand même bien sué pour débugguer cette bouse ce casse tête mais c’était une super expérience et une réelle satisfaction 🙂

Au passage, ce qui m’a mis sur la voie ce sont les requêtes dans la partie Network de la console de Firefox/Chrome (parce que celle d’iE, merci…)

hope this’ll help 😉

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s