Exécuter une fonction avant une autre

**islyoung2** · 21/07/2010, 09h52

Bonjour;
Je ne sais pas si j'ai bien choisi le titre pour mon problème ou non (merci de me diriger).
voila j'ai un formulaire qui contient deux select multiple, les deux contiennent beaucoup d'éléments (des milliers

) j'ai un bouton entre les deux select pour basculer les éléments entre les deux à travers une fonction qui est une peut couteuse en temps d'exécution, mais ce n'est pas sa le problème, mon problème c'est que je veux désactiver le bouton de validation du formulaire juste avant l'exécution de la fonction qui effectue le transfert d'éléments entre les deux select et le réactiver à nouveau après que l'exécution de cette fonction soit terminer (puisque sont exécution prend de 4 à 5 sec).
en quelque sort, lorsque je clique sur le bouton qui effectue le transfert j'exécute ceci :

Code :

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

1
2
3
4
 
fonction_desactiver_le_bouton_validation();
fonction_du_transfert() // fonction couteuse en temps d'éxecution
fonction_sactiver_le_bouton_validation();

mon problème c'est que malgré mon exécution des trois fonction dans l'ordre mais la désactivation et l'activation du bouton validation ne s'effectuent qu'après l'exécution de la fonction du transfert.
y a quelqu'un qui a une idée comment je peux faire pour forcer l'exécution des trois fonction dans l'ordre que je veux???
merci

**tusssss** · 21/07/2010, 10h01

Une méthode barbare :

Code :

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

1
2
3
4
5
6
7
8
9
 
function fonction_du_transfert() {
 
  fonction_desactiver_le_bouton();
 
  ...code...
 
  fonction_activer_le_bouton();
}

Ceci devrait fonctionner en toute logique.

**islyoung2** · 21/07/2010, 11h08

Envoyé par tusssss

Une méthode barbare :

Code :

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

1
2
3
4
5
6
7
8
9
 
function fonction_du_transfert() {
 
  fonction_desactiver_le_bouton();
 
  ...code...
 
  fonction_activer_le_bouton();
}

Ceci devrait fonctionner en toute logique.

Merci pour ta réponse;
J'ai déjà essayer cette méthode mais sa ne marche pas, la desactivation et l'activation du bouton ne se fais qu'après l'exécution du script de transfert je ne comprend pas.

**le_chomeur** · 21/07/2010, 11h19

alors le problème se situe ailleurs

montre nous le contenu de tes fonctions ^^

**islyoung2** · 21/07/2010, 11h26

Envoyé par le_chomeur

alors le problème se situe ailleurs

montre nous le contenu de tes fonctions ^^

voici mes fonctions:
1- la fonction qui désactive et active le bouton.

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
 
function change_save_button(etat)
{
	if(etat == 'activate')
	{
		document.getElementById('submit_img').src 		= 'img/btn_enreg.gif';
		document.getElementById('submit_img').onclick	= "return do_post('data_selected','div');";
	}
	else if(etat == 'desactivate')
	{
		document.getElementById('submit_img').src 		= 'img/btn_enreg_desac.gif';
		document.getElementById('submit_img').onclick	= "";
	}
	//alert(document.getElementById('submit_img').onclick)
	return true;
}

2- la fonction de transfert.

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
 
function ajouter_trier(src , dest ) 
{
	//alert('yes');
	change_save_button('desactivate');
	ajouter(src , dest);
	sortSelect (dest);
	change_save_button('activate');
}
 
function ajouter(src , dest ) {
 
    var src =  document.getElementById(src);
	var dest = document.getElementById(dest);
 
    for(i = (src.options.length-1);i >=0 ;i--)
    if(src.options[i].selected ){
    	dest.options[dest.options.length] = new Option(src.options[i].text,src.options[i].value);
    src.options[i] = null;
    }
 
	return false;
}
 
function sortSelect(selectToSort) 
{
 
	var selectToSort = document.getElementById(selectToSort);
	// copy options into an array
	var myOptions = [];
	for (var loop=0; loop<selectToSort.options.length; loop++) 
	{
		myOptions[loop] = 
		{ 
			optText:selectToSort.options[loop].text, 
			optValue:selectToSort.options[loop].value 
		};
	}
	// sort array
	myOptions.sort(sortFuncAsc);
 
	// copy sorted options from array back to select box
	selectToSort.options.length = 0;
	for (var loop=0; loop<myOptions.length; loop++) 
	{
		var optObj = document.createElement('option');
		optObj.text = myOptions[loop].optText;
		optObj.value = myOptions[loop].optValue;
		selectToSort.options.add(optObj);
	}
}

la fonction sortSelect c'est elle qui prend du temps et elle me bloque l'application pendant son exécution (elle fais la réorganisation des éléments du select par ordre alphabétique), mais sa ne dois pas poser de problème si je peut seulement désactiver le bouton de validation avant que la fonction s'exécute comme sa l'utilisateur ne se trompe pas et sache qu'il ne peut pas encors valider le formulaire.

**le_chomeur** · 21/07/2010, 11h34

étrange

as tu test de faire uniquement :

Code :

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

change_save_button('desactivate');

et voir si ça fonctionne ?

sinon petit truc :

stock la valeur de selectToSort.options.length dans une variable car si tu as des milliers d'éléments comme tu nous l'indique , tu perds énormément de temps a tout recalculer

**islyoung2** · 21/07/2010, 11h41

Envoyé par le_chomeur

étrange

as tu test de faire uniquement :

Code :

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

change_save_button('desactivate');

et voir si ça fonctionne ?

oui j'ai déja essayer sa, elle désactive le bouton à la fin.
merci pour ton conseil voici ma nouvelle fonction :

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
 
function sortSelect(selectToSort) 
{
 
	var selectToSort 	= document.getElementById(selectToSort);
	var length			= selectToSort.options.length;
	// copy options into an array
	var myOptions = [];
	for (var loop=0; loop<length; loop++) 
	{
		myOptions[loop] = 
		{ 
			optText:selectToSort.options[loop].text, 
			optValue:selectToSort.options[loop].value 
		};
	}
	// sort array
	myOptions.sort(sortFuncAsc);
	MyOption_legth = myOptions.length;
 
	// copy sorted options from array back to select box
	selectToSort.options.length = 0;
	for (var loop=0; loop<MyOption_legth; loop++) 
	{
		var optObj = document.createElement('option');
		optObj.text = myOptions[loop].optText;
		optObj.value = myOptions[loop].optValue;
		selectToSort.options.add(optObj);
	}
}

HEUUUH juste pour info mon bouton de validation en faite c'est un input type image, je ne sais pas si sa peut aider cette information ???

**le_chomeur** · 21/07/2010, 11h50

en fait un boutton image se comporte comme un bouton de type submit ,
il faut donc que tu désactives le submit de ton formulaire :

Code :

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

document.getElementById(tonformulaire).onsubmit = return false;

puis pour réactiver

Code :

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

document.getElementById(tonformulaire).onsubmit = return true;

en faisant cela ton bouton sera cliquable , mais ne postera pas le formulaire
(si c'est bien l'effet escompté ?? )

Code :

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

1
2
3
4
5
6
7
8
9
 
function ajouter_trier(src , dest ) 
{
	//alert('yes');
	change_save_button('desactivate');
	ajouter(src , dest);
	sortSelect (dest);
	change_save_button('activate');
}

va effectuer le traitement souhaité

**sekaijin** · 21/07/2010, 11h52

Code :

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

1
2
3
document.getElementById('submit_img').disabled=true;
... //your code
document.getElementById('submit_img').disabled=false;

**le_chomeur** · 21/07/2010, 11h58

aussi

en général je préfère désactiver le formulaire, car l'appuis sur la touche entrée peut provoquer le submit

**islyoung2** · 21/07/2010, 12h00

Code :

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

document.getElementById(tonformulaire).onsubmit = return false;

HEUUUUUUH sa retourne une erreure de syntaxe

**le_chomeur** · 21/07/2010, 12h48

au temps pour moi

Code :

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

document.getElementById(tonformulaire).onsubmit = function(){return false};

**islyoung2** · 21/07/2010, 13h09

c'est toujour pareil !!!!
le bouton de se desactive pas, et si je clique sur lui avant que l'execution de la fonction ne soit terminer le formulaire se poste à la fin de l'éxécution, je ne comprend pas ce qui se passe

**le_chomeur** · 21/07/2010, 13h21

ta méthode est bien comme ça :

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
function change_save_button(etat)
{
	if(etat == 'activate')
	{
document.getElementById(tonformulaire).onsubmit = function(){return true};
		document.getElementById('submit_img').src 		= 'img/btn_enreg.gif';
		document.getElementById('submit_img').onclick	= "return do_post('data_selected','div');";
	}
	else if(etat == 'desactivate')
	{
document.getElementById(tonformulaire).onsubmit = function(){return false};
		document.getElementById('submit_img').src 		= 'img/btn_enreg_desac.gif';
		document.getElementById('submit_img').onclick	= "";
	}
	//alert(document.getElementById('submit_img').onclick)
}

si oui le problème vient forcément d'ailleurs

**islyoung2** · 21/07/2010, 13h31

Envoyé par le_chomeur

ta méthode est bien comme ça :

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
function change_save_button(etat)
{
	if(etat == 'activate')
	{
document.getElementById(tonformulaire).onsubmit = function(){return true};
		document.getElementById('submit_img').src 		= 'img/btn_enreg.gif';
		document.getElementById('submit_img').onclick	= "return do_post('data_selected','div');";
	}
	else if(etat == 'desactivate')
	{
document.getElementById(tonformulaire).onsubmit = function(){return false};
		document.getElementById('submit_img').src 		= 'img/btn_enreg_desac.gif';
		document.getElementById('submit_img').onclick	= "";
	}
	//alert(document.getElementById('submit_img').onclick)
}

si oui le problème vient forcément d'ailleurs

oui ma fonction est comme sa.
et le problème vient dans l'ordre de l'exécution, si je fais une alerte après l'appel de cette fonction et avant l'appel de la fonction de transfert d'éléments LA l'image change de source et l'alerte surgit et après validation de l'alerte que le transfert d'éléments s'effectue, sinon c'est toujours le transfert qui vient en 1er et c'est lui qui me bloque l'application

**le_chomeur** · 21/07/2010, 13h39

si tu fais ça :

Code :

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

1
2
3
4
5
6
7
8
9
function ajouter_trier(src , dest ) 
{
 
	change_save_button('desactivate');
alert('yes');
	ajouter(src , dest);
	sortSelect (dest);
	change_save_button('activate');
}

ça fonctionne mais si tu enlèves l'alerte , ça ne marche plus ??

**tusssss** · 21/07/2010, 13h40

C'est pas le chargement de l'image qui prend trop de temps?

Du coup en chargeant tes images dans le page avant, ça devrait mieux fonctionner, non ?

Ou alors un onload sur ton image ?

Je lance des idées en l'air, désolé.

**Watilin** · 21/07/2010, 13h48

Problème de reflow ça ^^

C’est quoi le reflow ? C’est une réorganisation des éléments visibles de la page après une modification JavaScript. Le problème se situe au niveau du mot « après »…

Parce que le navigateur est une feignasse, il va essayer de regrouper les modifications visibles pour faire le moins de reflows possibles. J’imagine que c’est ce qui se passe dans le cas présent : il a un attribut src à changer deux fois, et il fait les deux en même temps. Et il est carrément gagnant car en fin de compte il n’a rien à faire…

Dans les frameworks on trouve des fonctions du genre delay ou defer. Le principe est toujours le même : on retarde le code JavaScript avec un setTimeout pour « laisser respirer » le navigateur. Comme il n’a pas de code à traiter, il fait les reflows en attente.

Donc à moins que je raconte des conneries depuis le début, ceci devrait résoudre ton problème :

Code js :

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

1
2
3
4
5
6
7
 
fonction_desactiver_le_bouton_validation();
// et là on fait une pause
window.setTimeout(function() {
	fonction_du_transfert();
	fonction_activer_le_bouton_validation();
}, 10); // t’as 10ms pour faire ton reflow, feignasse

Pour le second reflow, je connais pas le reste de ton code mais j’imagine qu’il n’y a pas besoin de refaire une pause. Sinon, tu sais comment faire…

**islyoung2** · 21/07/2010, 13h48

Envoyé par tusssss

C'est pas le chargement de l'image qui prend trop de temps?

Du coup en chargeant tes images dans le page avant, ça devrait mieux fonctionner, non ?

Ou alors un onload sur ton image ?

Je lance des idées en l'air, désolé.

Merci pour votre réponse;
Non ce n'est pas le changement de l'image qui prend du temps du coup qui pose problème car j'ai fais cette approche aussi :
j'ai ajouter un champ de texte à coté de mon submit:

Code :

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

1
2
 
<input onclick="" id="submit_txt"  value="ACTIVATE" type="text" />

puis j'ai modifier cette fonction :

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
 
function change_save_button(etat)
{
	if(etat == 'activate')
	{
		document.getElementById('submit_img').src 		= 'img/btn_enreg.gif';
		document.getElementById('submit_txt').value 	= 'ACTIVATE';
 
		//document.getElementById('submit_img').onclick	= "return do_post('data_selected','div');";
		//document.getElementById('submit_img').onsubmit 	= do_post('data_selected','div');
	}
	else if(etat == 'desactivate')
	{
		document.getElementById('submit_img').src 		= 'img/btn_enreg_desac.gif';
		document.getElementById('submit_txt').value 	= 'DESACTIVATE';
		//document.getElementById('submit_img').onclick	= "";
		//document.getElementById('submit_img').onsubmit 	= function(){return false};
	}
	//alert(document.getElementById('submit_img').onclick)
	return true;
}

et la fonction principal :

Code :

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

1
2
3
4
5
6
7
8
 
function ajouter_trier(src , dest ) 
{
	change_save_button('desactivate');
	ajouter(src , dest);
	sortSelect (dest);
	//change_save_button('activate');
}

et c'est toujours le même problème, je dois attendre la fin de l'exécution de cet dernière pour que mon champs de texte change de contenu, et le changement de contenu d'un texte sa m'étonnerai qu'il prennent du temps surtout que je le change avant l'exécution de ma fonction gourmande.

**islyoung2** · 21/07/2010, 13h54

Envoyé par Watilin

Problème de reflow ça ^^

C’est quoi le reflow ? C’est une réorganisation des éléments visibles de la page après une modification JavaScript. Le problème se situe au niveau du mot « après »…

Parce que le navigateur est une feignasse, il va essayer de regrouper les modifications visibles pour faire le moins de reflows possibles. J’imagine que c’est ce qui se passe dans le cas présent : il a un attribut src à changer deux fois, et il fait les deux en même temps. Et il est carrément gagnant car en fin de compte il n’a rien à faire…

Dans les frameworks on trouve des fonctions du genre delay ou defer. Le principe est toujours le même : on retarde le code JavaScript avec un setTimeout pour « laisser respirer » le navigateur. Comme il n’a pas de code à traiter, il fait les reflows en attente.

Donc à moins que je raconte des conneries depuis le début, ceci devrait résoudre ton problème :

Code js :

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

1
2
3
4
5
6
7
 
fonction_desactiver_le_bouton_validation();
// et là on fait une pause
window.setTimeout(function() {
	fonction_du_transfert();
	fonction_activer_le_bouton_validation();
}, 10); // t’as 10ms pour faire ton reflow, feignasse