[AJAX] JQuery synchronisme
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:
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;
}
?> |
