Exécuter une fonction avant une autre

Version imprimable

21/07/2010, 09h52
islyoung2

Exécuter une fonction avant une autre
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 :aie:) 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:

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

Une méthode barbare :
Code:

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.

21/07/2010, 11h08
islyoung2
Citation:
Envoyé par tusssss

Une méthode barbare :

Code:

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.:?
21/07/2010, 11h19
le_chomeur

alors le problème se situe ailleurs :)

montre nous le contenu de tes fonctions ^^

Citation:

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:

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:

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.

21/07/2010, 11h34
le_chomeur

étrange :?

as tu test de faire uniquement :

Code:

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 ;)

Citation:

Envoyé par le_chomeur

étrange :?

as tu test de faire uniquement :

Code:

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:

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 ???

21/07/2010, 11h50
le_chomeur
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:

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

puis pour réactiver

Code:

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:

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é :)

Code:

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

21/07/2010, 11h58
le_chomeur

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 :)
21/07/2010, 12h00
islyoung2

Code:

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

HEUUUUUUH sa retourne une erreure de syntaxe :aie:
21/07/2010, 12h48
le_chomeur

au temps pour moi ;)

Code:

document.getElementById(tonformulaire).onsubmit = function(){return false};
21/07/2010, 13h09
islyoung2

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 :arf:

ta méthode est bien comme ça :

Code:

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 :)

Citation:
Envoyé par le_chomeur
ta méthode est bien comme ça :
Code:

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

si tu fais ça :
Code:

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 ??

21/07/2010, 13h40
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é.

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:

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…

;)

Citation:

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:

1 2 <input onclick="" id="submit_txt" value="ACTIVATE" type="text" />
puis j'ai modifier cette fonction :
Code:

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:

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.

Citation:
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:

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…

;)
MERCI pour votre réponse;
j'ai fais un test à la volé sa à l'air marché, je vais reorganiser mon code et je vous ferais retour.:ccool:

21/07/2010, 13h59
tusssss

Sinon il y avait peut-être un moyen de "tricher" un peu en faisant :

button.onmousedown la on desactive le bouton

button.onmouseup et la on execute le reste de la fonction.

Pas sur que ça règle le problème de "reflow"...mais bon, j'aurais tenté ça.

Effectivement sa à marché voila ma nouvelle fonction principal :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function ajouter_trier(src , dest ) { change_save_button('desactivate'); window.setTimeout(function() { ajouter(src , dest); sortSelect (dest); change_save_button('activate'); }, 10); // t’as 10ms pour faire ton reflow, feignasse }
:merci: beaucoup Mr Watilin vous me sauvez une autre après midi de cassement de tête :ccool:

21/07/2010, 15h51
sekaijin

Je crois que j'ai compris ce qui te pose pb

lorsque tu enchaine

desactiver_bouton
traitement_long
activer_bouton

les choses s'exécute bien ainsi et ton bouton est désactivé
mais l'apparence du bouton ne changera que l'orsque l'évènement sera traité
c'est a dire lorsque le navigateur va faire un refresh de ce que tu à modifié
Or dans ton cas ton script ne rends pas la main à l'utilisateur donc tu ne vois rien.

pour les traitement long comme ça je fais une fonction qui traite un lot et non la totalité des données
lorsqu'elle à fini son lot elle rends la main
un timer viens relancer la fonction pour un autre lot
lorsque tous les lot sont fait le timer est détruit

ainsi le traitement se passe en tache de fond et l'utilisateur peut continuer à travailler sur autre chose.

du coup au premier appel
disabled des éléments à bloquer
constitution du timer

pour tous les appels
traiter un paquet de donner
vérifier qu'il reste des données
si plus de donné suppression du timer
activer les éléments

ça rends l'interface plus fluide

en DOM/HTML5 on pourra avoir des "thread"

A+JYT