[Ajax et JQuery] problème de synchronisme

morbli · 20/02/2012, 17h22

Bonjour,
ne sachant trop dans quelle rubrique placer cette demande (Ajax ou Javascript), je la mets dans les deux.

je souhaite exécuter une série de tests successivement. Chaque test doit être terminé avant de passer au suivant.
Pour les besoins de l'exemple chaque test retourne une valeur après 2 s d'attente (extrait de code php dans ci-dessous).
Je m'attends donc à avoir une mise à jour du résultat toutes les 2s.
En fonction du résultat du test, la couleur de fond de la cellule variera

Or,
[si async:true] après 2s, les 4 résultats sont affichés en même temps et la propriété css se met à jour avec une même valeur sans tenir compte du résultat du test
[si async:false] après chaque 2s, la console affiche le résultat correct de chaque test mais la propriété css ne se met à jour qu'avec une même valeur sans tenir compte du résultat du test

Il me manque quelque chose mais quoi?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 
$(function () { // lancement des différents tests
	$('#tstPlay').click(function() {
		$('td').css('background-color','#f9eee0'); // Couleur de fond par défaut
 
		Test('Eth1');
		Test('Eth2');
		Test('Eth3');
		Test('Eth4');
	});	
});
 
function Test(test){
	page="dbox.php";
	$.ajax({  // ajax
		url: page, // url de la page à charger
		type: 'POST',
		data: "test="+test,
		cache: false, // pas de mise en cache 
		timeout: 5000,
                async: false,
		error: function(request,error) {
			if (error == "timeout") {
				affiche(0,test); // Fin du test timeout
				console.log ("timeout");
			}
			else {
				affiche(0,test); // Fin du test error
				console.log ("error");
			}
		},
		success:function(retour){ // si la requête est un succès
			affiche(retour,test);
			console.log ("%s",retour);
		}
	})
}
 
function affiche(retour, test) {
	switch (test) {
	case "Eth1":
		id = '#tstEth1';
		break;
	case "Eth2":
		id = '#tstEth2';
		break;
	case "Eth3":
		id = '#tstEth3';
		break;
	case "Eth4":
		id = '#tstEth4';
		break;
	}
 
	if (retour == '0') 
		$(id).css('background-color','red');
	else
		$(id).css('background-color','green');
	console.log ("%s:%s",id,retour);
}
 
 
<?php
 
	$test = $_POST["test"];
 
	sleep (2);
	switch ($test) {
    case "Eth1":
        echo '1';
        break;
    case "Eth2":
        echo '0';
        break;
    case "Eth3":
        echo '1';
        break;
    case "Eth4":
        echo '0';
        break;
	}
?>

NoSmoking · 21/02/2012, 22h07

Bonsoir,
ce qu'il faut savoir c'est que le "refresh" de la page n'est pas prioritaire lors de l'exécution d'un script.

En mode asynchrone tu n'as aucune garantie que la réponse #1 arrive avant la réponse #3, par exemple. Il te faut dans ce cas attendre la réponse #1 pour lancer la requête #2.

En test local la réponse est quasiment immédiate ce qui peut biaiser le résultat.

Je te mets un petit exemple qui devrait te faire voir le "principe" de l'utilisation d'une liste de fonction à exécuter et surtout l'utilisation de setTimeout "libérant" le moteur de rendu et l'autorisant à afficher avant relance d'une fonction.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
.red{color:red;}
.blue{color:blue;}
.green{color:green;}
</style>
</head>
<body>
<button onclick="lanceRequete( 'init');">Go....</button>
<label><input type="checkbox" id="inp_check">Pour voir</label>
<div id="div_test">Texte black</div>
<script type="text/javascript">
// init des variables
var flag, tFct = [];
var oElem = document.getElementById('div_test');
var oCheck= document.getElementById('inp_check');
// permet de presque simuler une requête !!!
function getDelay( tps){
  var tps = tps || 0.5;
  tps *= 1000;  // tps en seconde
  var end = new Date().getTime() +tps;
  while( new Date().getTime() < end){;}
}
function fct_1(){
  getDelay( 1);
  oElem.className = 'red';
  oElem.innerHTML = 'texte red';
}
function fct_2(){
  getDelay();
  oElem.className = 'blue';
  oElem.innerHTML = 'texte blue';
}
function fct_3(){
  getDelay( 1);
  oElem.className = 'green';
  oElem.innerHTML = 'texte green';
}
function lanceRequete(init){
  // initialisation de la liste des fonctions à lancer
  if( init && init.length){
    oElem.innerHTML = '';
    tFct = [fct_1, fct_2, fct_3];
    // flag suivant checkbox
    flag = oCheck.checked;
  }
  // requête demandée
  requete();
}
function requete(){
  // si la liste est non vide
  if( tFct.length){
    // lance la fonction
    tFct[0]();
    // la supprime de la liste
    tFct.shift();
    // action suivant flag
    flag ? setTimeout( lanceRequete, 5) : lanceRequete();
  }
  // c'est fini
  else{
    oElem.innerHTML += '<br>Terminé...';
  }
}
</script>
</body>
</html>

lance le script par appui sur le bouton Go puis coche la case Pour voir et relance pour voir la différence.

Il te faudra bien sûr adapter....

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email