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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | // 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().
1 2 3 4 5 6 | // 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 😉
