synchronicité et callback (success) en mode async

Version imprimable

2 pièce(s) jointe(s)

Salut ! Alors voila j'ai réalisé un site web ....

Et il marche sauf qu'il est plutot lent .... en fait j'ai un probleme de synchronicité et je trouve pas comment remédier à ça :cry:

J'ai normalement codé mon site en ajax mais je suis obligé de faire ca:
Code:

1 2 3 4 5 6 7 8 9 10 11 function ajax_call(what2do, callback){ $.ajax({ type: "GET", async: false, dataType: "json", url: "data.php?" + what2do, success: function(json) { callback.call(this, json); } }); };
Donc je pense qu'en fait il essaye d afficher les valeurs avant de les avoir calculé ?

Et le fait que je le mette synchrone au lieu d asynchrone rend le site plus lent non ?

Donc j'aimerai le mettre asynchrone mais que ca marche ..... ^^

La pour le moment tout marche en sync.

Ci join, je met mon fichier index et le fichier data.php.

J espere que vous pourrez m'aider ... :D

27/11/2012, 17h17
SpaceFrog

essaye une machine a voyager dans le temps de sorte qu'il puisse obtenir une réponse avant que le serveur ne l'ait délivrée ?
27/11/2012, 19h47
SylvainPV

Citation:

je suis obligé de faire ca

Bonjour,
Il aurait été plus pertinent de nous dire pourquoi tu es obligé de faire ça. Décrire le problème plutôt qu'une (mauvaise) solution. Qu'as-tu en console ?

Si c'est bien ce que je penses, il s'agit d'une erreur de codage classique. Tu exécutes un code dépendant de données asynchrones en dehors du callback de ta requête AJAX. Un peu comme ici :
http://www.developpez.net/forums/d12...rtee-variable/
28/11/2012, 15h11
InfoGeo

Merci de ta réponse Sylvain

Pourquoi je suis obligé de faire ? Le probleme est la je ne sais pas tout ce que je sais c que si je ne le fais pas rien ne marche.

Si je savais pourquoi je pense que oui je pourrais trouvé la solution

Sinon je n ai pas bien compris la suite ....

En fait oui j ai du code a coté comme on peut le voir qui va changer l adresse url suivant les données que je veux récupérer et cette adresse je la crée suivant les options définies par l utilisateur

A quoi te sers call() exactement dans ton code :koi:
Parce que je doute que la valeur this transmise soit celle que tu espères...
Code:

1 2 3 4 5 6 7 8 9 10 function ajax_call(what2do, callback){ $.ajax({ type: "GET", dataType: "json", url: "data.php?" + what2do, success: function(json) { callback(json); } }); };
devrait être suffisant...

j'ai essayé de faire comme tu m as conseillé bovino mais plus rien ne marche :/

Alors j'ai essayé en remettant le async à "False"
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function ajax_call(what2do, callback){ $.ajax({ type: "GET", async: false, dataType: "json", url: "data.php?" + what2do, success: function(json) { callback(json); } }); };
Et la ca marche donc merci =)

Mais l’exécution n'est pas plus rapide :cry:

03/12/2012, 10h49
SpaceFrog

Il te sera de toute façon impossible de traiter des données avant qu'elles ne soient retournées, donc le temps minimal à attendre est celui que mettra le serveur a te retourner les données.
async true ne fera pas que le serveur retournera les données plus vite, il fera juste en sorte que le reste du programme tournera sans attendre la réponse du serveur
03/12/2012, 10h54
InfoGeo

Oui je suis d accord mais je pensais que bon on va dire que la ca met 1min pour afficher toutes les données ....

mais pendant ces 1min l utilisateur ne voit rien ...

je pensais qu'il etait possible que les graphiques, les données s affichent au fur et a mesure, qu au final oui ca prend une minute, mais que par exemple au bout de 30sec il y a la moitier des graphiques qui soient visibles et complets.

:calim2:

En fait j'affiche mes graphs avec ca par exemple (qui est a la fin du code) en html:

Code:

<div id="pie_certification" style="width: 700px; height: 400px; margin: 10px auto"></div>

Et le code pour les données du graph c'est ca, qui est dans le head, en javascript:

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
 
	if (selected_certification == "all" &&  document.forms.checkbox_show_graph.showgraph.checked == true) {	
		var chart;
			$(document).ready(function() {
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'pie_certification',
						plotBackgroundColor: null,		
						plotBorderWidth: null,
						plotShadow: false
					},
					title: {
						text: 'Certification Level',
					},
					subtitle: {
						text: save_country + " : " + selected_year + titre_intext + titre_reference + titre_certified,  // affiche le pays et l'année sélectionnés par l'utilisateur	
					},
					tooltip: {
						formatter: function() {
							return '<b>'+ this.point.name +'</b>: '+ this.y;
						}
					},
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: 'pointer',
							dataLabels: {
							formatter: function() {
								// display only if larger than 0.5
								return this.y > 0.5  ? this.y : null;
							}
						},
							showInLegend: true
						}
					},
				    series: [{
						type: 'pie',
						name: 'Certification',
						data: [
							['ACFE', return_certif[0]],
							['ACPS', return_certif[1]],
							['ACSE', return_certif[2]],
							['ACSR', return_certif[3]],
							['AQPS', return_certif[4]],							
						]
					}]
				});
			});
 
 
	}

Donc serait il possible de faire en sorte que la ligne html soit exécuté tout de suite apres cette fonction javascript ?

Ca permettrait d'afficher les graphs petit a petit je pense et donc ca serait mieux pour l utilisateur

03/12/2012, 11h20
SpaceFrog

les données ne sont utilisables qu'a la fin de leur réception ...

tu pourrais éventuellement décomposer ton ajax afin de faire plusieurs envois/réception et traiter les lots dès leur arrivée

snif :cry:

mais pourtant mon site est en 2 parties, des données brutes et en dessous des graphs:

http://gyazo.com/f7c980771a029aa7ef71bf315cef2012

Et les données brutes quand j applique un filtre, s affiche au fur et a mesure, mais les graphs eux ils s affichent tous d un coup ... tout simplement parce que le code html pour les afficher est tout a la fin je pense ....

Pour les données brutes j ai quelque chose comme ca:
Code:

1 2 3 4 5 6 7 8 9 10 var tab_intext = ["internal", "external"]; data_intext = new Array(); for(var j=0;j<tab_intext.length;j++){ url = "type_data=Int_Ext&type_areaOUcountry=" + save_type_country + "&nom_data=" + tab_intext[j] + "&year=" + selected_year + "&month=all&areaOUcountry=" + save_country + "&reference=" + selected_reference + "&certification=" + selected_certification + "&trie_intext=" + selected_intext + "&certified=" + selected_certified; ajax_call (url, function(json){ $('#id' + tab_intext[j] + 'data').html(json['ladata']); data_intext[j] = json['ladata']; }); }
C'est pas possible de faire quelque chose de similaire pour les graphs d apres vous ? :calim2:

03/12/2012, 11h33
SpaceFrog

comme sus dit en récupérant les données par lot et en les traitant pas lots.
03/12/2012, 11h37
InfoGeo

Mais la j ai pas tout compris ... ^^

En gros j aurais pas qu'une fonction "ajax_call" ?
03/12/2012, 11h58
SpaceFrog

Non tu devras aller chercher tes données par paquets ...
scinder ton envoi ajax en plusieurs
03/12/2012, 12h01
InfoGeo

ha tu veux dire quand je fais

Code:

print json_encode($resultat);

dans mon fichier data.php ?
03/12/2012, 12h49
SpaceFrog

arranges toi que ta page php retourne une première partie des infos et relance un ajax pour la suite dans le success...
03/12/2012, 13h20
InfoGeo

8O 8O 8O
03/12/2012, 14h46
SpaceFrog

ben un peu comme si tu faisais une pagination en lançant d'affilée plusieurs ajax ...
03/12/2012, 14h52
InfoGeo

faut comprendre que moi je suis en alternance, que j ai jamais eu de cours de programmation web, que j ai jamais eu quelqu un pour m expliquer et que c mon premier site ^^

donc bon ....
03/12/2012, 16h38
SpaceFrog

ben justement...

je dis juste qu'au lieu de recupérer ton gros json en une seule fois tu peux imaginer de le récupérer en plusieurs ...
03/12/2012, 17h11
InfoGeo

ok mais pourquoi ?
03/12/2012, 17h21
SpaceFrog

????
Ben c'est toi qui te plains que tu ne peux pas afficher les données avant qu'elles ne soient toutes arrivées coté client

les récupérer par paquet permettrait d'en afficher une partie pendant que tu vas récupérer les autres sur le serveur ...

Faut savoir ce que tu veux ...
Tu te plains qu'ajax est bloquant
je te donne une solution pour faire un affichage progressif et tu me demandes pourquoi ???????

Non mais si mais je ne comprend pas tout :cry:

par exemple le fait que tu me dises que c pas possible que j'affiche les graphs au fur et à mesure alors que les données qui sont pour ces graphs j ai été les chercher en ajax et normalemet enfin je crois bien que j ai les données dans des variables quand j arrive au moment du codage des graphs ... donc pourquoi a la fin du codage d un graph je peux pas mettre un lien vers l ancre qui permet de l afficher en html ?

quand j ai fait ca:

Code:

1
2
3
4
5
6
7
8
9
var tab_intext = ["internal", "external"];
		data_intext = new Array();
		for(var j=0;j<tab_intext.length;j++){
			url = "type_data=Int_Ext&type_areaOUcountry=" + save_type_country + "&nom_data=" + tab_intext[j] + "&year=" + selected_year + "&month=all&areaOUcountry=" + save_country  + "&reference=" + selected_reference + "&certification=" + selected_certification + "&trie_intext=" + selected_intext + "&certified=" + selected_certified;			
			ajax_call (url, function(json){
				$('#id' + tab_intext[j] + 'data').html(json['ladata']);
				data_intext[j] = json['ladata'];			 
			}); 
		}

qu'apres je fais ca :

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
if (selected_intext == "all" &&  document.forms.checkbox_show_graph.showgraph.checked == true) {		
			var chart;
			$(document).ready(function() {
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'pie_intext',
						plotBackgroundColor: null,
						plotBorderWidth: null,
						plotShadow: false
					},
					title: {
						text: 'Internal / External',
					},
					subtitle: {
						text: save_country + " : " + selected_year + titre_intext + titre_reference + titre_certification + titre_certified,
					},
					tooltip: {
						formatter: function() {
							return '<b>'+ this.point.name +'</b>: '+ this.y;
						}
					},
					plotOptions: {
						pie: {
							allowPointSelect: true,
								cursor: 'pointer',
							dataLabels: {
							formatter: function() {
								// display only if larger than 0.5
								return this.y > 0.5  ? this.y   : null;
							}
						},
							showInLegend: true
						}
					},
				    series: [{
						type: 'pie',
						name: 'Pie_IntExt',
						data: [
							['Internal',data_intext[0]],
							['External',data_intext[1]],		
						]
					}]
				});
			});
		}

qu'est ce qui m'empeche a ce moment la de l afficher ce graph, de faire un truc qui permet de dire va a l ancre pie_intext

Code:

<div id="pie_intext" style="width: 700px; height: 400px; margin: 10px auto"></div>

C'est les trucs comme ca que je comprend pas ^^ et du coup vu que je comprend pas ca je comprend pas pk tu veux faire des paquets

désolé je suis pas un bon moi .... :(