Performance du "Tout cocher"

**Llaur76** · 30/07/2008, 15h42

Bonjour,

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

**Matthieu2000** · 30/07/2008, 16h05

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

**danyboy85** · 30/07/2008, 16h06

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.

**le_chomeur** · 30/07/2008, 16h15

tu peux essayer ceci ;-)

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
<!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 ... )

**SweetLeaf** · 30/07/2008, 16h25

Pas mal du tout le_chomeur !! Mes respect

J'en avais fait une aussi mais pas si rapide ^^
Ca m'interesse pas mal, mais c'est quoi un benchmark ?

**danyboy85** · 30/07/2008, 16h43

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.

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.

**le_chomeur** · 30/07/2008, 17h04

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 :

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

**SweetLeaf** · 30/07/2008, 17h51

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

Performance du "Tout cocher"

JavaScript

Discussions similaires

Partager

Partager