Performance du "Tout cocher"

Version imprimable

Bonjour,
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 function cocherOuDecocher() { if (document.getElementById("toutcocher").checked == true) { <%for (int i=0;i<data.length;i++) {%> if (document.getElementById("valide"+<%=i%>) != null) { document.getElementById("valide"+<%=i%>).checked = true; } <%}%> } else { <%for (int i=0;i<data.length;i++) {%> if (document.getElementById("valide"+<%=i%>) != null) { document.getElementById("valide"+<%=i%>).checked = false; } <%}%> } }
Cette fonction fonctionne !
Mon problème est que le nombre de checkbox peut être variable. Et quand on atteint les 200 checkboxs, ça prend environ 5 secs à tout cocher. Je voulais donc savoir si ma fonction pouvait avoir un problème de performance ou si il y avait peut être qqch à faire pour que ça soit un peu plus rapide.

Merci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function cocherOuDecocher() {
	checkValue=document.getElementById("toutcocher").checked ;
	for(i=0;i<<%data.length%>;i++){
		champ=document.getElementById("valide"+i);
		if(champ){
		champ.checked =checkValue
		}		
	}	
}
//ou
 
function cocherOuDecocher() {
	checkValue=document.getElementById("toutcocher").checked ;
	i=0;
	champ=document.getElementById("valide"+i);
	while(champ){		
		champ.checked =checkValue
		i++;
		champ=document.getElementById("valide"+i);
	}	
}

30/07/2008, 16h06
danyboy85

Mmm... Je ne pense pas que tu vas pouvoir améliorer la performance de cette fonction de manière significative, surtout avec 200 checkbox dans ta page.

Ce que je peux te conseiller, c'est soit :

- d'afficher un texte "Veuillez patienter..." durant l'exécution de la fonction pour ne pas dérouter l'utilisateur (l'utilisateur acceptera la lenteur d'une fonction s'il en est informé)

- ou de faire en sorte de ne jamais dépasser un nombre défini de checkbox dans ta page. Si par exemple ces checkbox sont dans un tableau, utiliser un pager (tableau avec plusieurs pages [Premier] 1,2,3.....26 [Dernier]), mais c'est beaucoup plus fastidieux à mettre en place.

tu peux essayer ceci ;-)

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript">
	function cocherOuDecocher() {
		var etat = (document.getElementById("valide").checked) ? true:false;
		var nbElement = document.getElementById('listeCheckbox').getElementsByTagName('input');
		if(etat){
			for(var i = 0 , l = nbElement.length ; i <l ; i++){
				if (nbElement[i].type == 'checkbox') {
					nbElement[i].checked = etat;
				}
			}
		}
	}
 
function creerCheckBox(nombre){
	document.getElementById('listeCheckbox').innerHTML = '';
	for(var i = 0 ; i < nombre ; i++){
		var inputcheck = document.createElement("input");
		inputcheck.type= 'checkbox';
		document.getElementById('listeCheckbox').appendChild(inputcheck);
	}
}
</script>
</head>
 
<body>
<input type="checkbox" value="toto" onclick="cocherOuDecocher()" id="valide" />
<input type="text" value="100" id="nbCheck" /><input type="button" value="créer" onclick="creerCheckBox(document.getElementById('nbCheck').value)" />
<hr />
<div id="listeCheckbox">
 
</div>
</body>
</html>

pour 5000 champs je met 2 secondes environ ( je peux rajouter un benchmark au code si ça vous intéresse ... )

30/07/2008, 16h25
SweetLeaf

Pas mal du tout le_chomeur !! Mes respect :king:
J'en avais fait une aussi mais pas si rapide ^^
Ca m'interesse pas mal, mais c'est quoi un benchmark ?
30/07/2008, 16h43
danyboy85

Citation:

Envoyé par danyboy85

Mmm... Je ne pense pas que tu vas pouvoir améliorer la performance de cette fonction de manière significative, surtout avec 200 checkbox dans ta page.

:oops: Désolé de mettre avancé aussi vite, je ne pensais pas que vos modifications pouvaient avoir un tel impact sur les performances d'exécution de la fonction.

lol pas de mal :)

un benchmark c'est en gros une fonction te permettant d'évaluer quelque chsoe , dans notre cas ce sera le temps d'exécution :)

en gros :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript">
	function cocherOuDecocher(optimise) {
		var Debut = new Date();
		var etat = (document.getElementById("valide").checked) ? true:false;
		var etat = (document.getElementById("valide2").checked) ? true:false;
 
		var nbElement = document.getElementById('listeCheckbox').getElementsByTagName('input');
		if(optimise){
				for(var i = 0 , l = nbElement.length ; i <l ; i++){
					if (nbElement[i].type == 'checkbox') {
						nbElement[i].checked = etat;
					}
				}
			}
			else{
				for(var i = 0 ; i <nbElement.length  ; i++){
					if (nbElement[i].type == 'checkbox') {
						nbElement[i].checked = etat;
					}
				}
 
			}
			var Fin = new Date();
			alert(Fin-Debut+ "ms");
 
	}
 
function creerCheckBox(nombre){
	document.getElementById('listeCheckbox').innerHTML = '';
	for(var i = 0 ; i < nombre ; i++){
		var inputcheck = document.createElement("input");
		inputcheck.type= 'checkbox';
		document.getElementById('listeCheckbox').appendChild(inputcheck);
	}
}
</script>
</head>
 
<body>
<input type="radio" value="toto" onclick="cocherOuDecocher(true)" name="titi" id="valide" /> optimisé <input type="radio" value="toto" onclick="cocherOuDecocher(false)" id="valide2"  name="titi"/> non optimisé 
<input type="text" value="100" id="nbCheck" /><input type="button" value="créer" onclick="creerCheckBox(document.getElementById('nbCheck').value)" />
<hr />
<div id="listeCheckbox">
 
</div>
</body>
</html>

30/07/2008, 17h51
SweetLeaf

ah ok ca claque !!
Merci ! A la prochaine !!