Lenteur d'appel ou d'exécution d'une fonction javascript

Bonjour,


J'ai un souci avec un appel (ou exécution d'un code javascript).
On dirait qu'il faille attendre près de 1,5 seconde avant la moindre réactivité du click.
Pouvez-ous m'aider à y oir lus clair ?
Ce phénomène est bizarre...

La page d'essai est ici.
Pour comprendre, cliquer sur une des formes de diamant.

Merci d'avance pour votre aide.
Bon weekend

voici le code javascript :

		document.getElementById("bloc21").innerHTML="Chargement <img src='images/general/roulette.gif' width='32' height='32' alt='chargement_en_cours'>";
		formes="";
		if (swForme[ indforme ]==0) {
			swForme[indforme]=1;
			document.getElementById("forme"+indforme).style.borderColor="#333333";
		} else {
			swForme[indforme]=0;
			document.getElementById("forme"+indforme).style.borderColor="#EEEEEE";
		}
		for (var ind=1; ind<=9; ind++) {
			if (swForme[ind] == 1) {
				formes += ind + " ";
			}
		}
		if (formes != "") {
			formes = formes.substr(0,(formes.length-1));
		}

Voici le code html appelant :

                <div id="bloc1201">
                	<div class="forme" id="forme1" onClick="entoure(1);"><div class="titreforme"><?php echo $libforme[1]; ?></div><img src="images/recherche/rond.jpg" width="63" height="63" alt="votre_selection"></div>
                	<div class="forme" id="forme2" onClick="entoure(2);"><div class="titreforme"><?php echo $libforme[2]; ?></div><img src="images/recherche/princesse.jpg" width="63" height="63" alt="votre_selection"></div>
                	<div class="forme" id="forme3" onClick="entoure(3);"><div class="titreforme"><?php echo $libforme[3]; ?></div><img src="images/recherche/emeraude.jpg" width="63" height="63" alt="votre_selection"></div>
                	<div class="forme" id="forme4" onClick="entoure(4);"><div class="titreforme"><?php echo $libforme[4]; ?></div><img src="images/recherche/radiant.jpg" width="63" height="63" alt="votre_selection"></div>
                	<div class="forme" id="forme5" onClick="entoure(5);"><div class="titreforme"><?php echo $libforme[5]; ?></div><img src="images/recherche/oval.jpg" width="63" height="63" alt="votre_selection"></div>
                	<div class="forme" id="forme6" onClick="entoure(6);"><div class="titreforme"><?php echo $libforme[6]; ?></div><img src="images/recherche/poire.jpg" width="63" height="63" alt="votre_selection"></div>
                	<div class="forme" id="forme7" onClick="entoure(7);"><div class="titreforme"><?php echo $libforme[7]; ?></div><img src="images/recherche/marquise.jpg" width="63" height="63" alt="votre_selection"></div>
                	<div class="forme" id="forme8" onClick="entoure(8);"><div class="titreforme"><?php echo $libforme[8]; ?></div><img src="images/recherche/coeur.jpg" width="63" height="63" alt="votre_selection"></div>
                	<div class="forme" id="forme9" onClick="entoure(9);"><div class="titreforme"><?php echo $libforme[9]; ?></div><img src="images/recherche/vide.gif" width="63" height="63" alt="votre_selection"></div>
                    <div style="clear: left;"></div>
                </div>        

Modifié par jytest (08 Feb 2013 - 12:04)

oui j'ai bien une requête mysql...
mais elle s'effectue juste en fin de cette fonction...

Et cette requête traîne justement, cette 1,5 seconde-là, avant de démarrer !
Une idée peut-être ?

Je me demande si le fait d'utiliser jquery ne "lance" pas cette latence ?
Si tel est le cas, comment l'éviter ?

Voici la fonction au complet :

	function entoure(indforme) {
		document.getElementById("bloc21").innerHTML="Chargement <img src='images/general/roulette.gif' width='32' height='32' alt='chargement_en_cours'>";
		formes="";
		if (swForme[indforme]==0) {
			swForme[indforme]=1;
			document.getElementById("forme"+indforme).style.borderColor="#333333";
		} else {
			swForme[indforme]=0;
			document.getElementById("forme"+indforme).style.borderColor="#EEEEEE";
		}
		for (var ind=1; ind<=9; ind++) {
			if (swForme[ind] == 1) {
				formes += ind + " ";
			}
		}
		if (formes != "") {
			formes = formes.substr(0,(formes.length-1));
		}
		url();
		$('#example').dataTable( {
			"bDestroy": true,
			"sScrollY": example,
//			"bPaginate": false,
			"bFilter": false,
			"bInfo": false,
			"bScrollCollapse": true,
			"BJQueryUI" : true,
			"aoColumns": [
				{ "sTitle": "C",			"bSortable": true,	"sClass": "alignCenter", 	"bVisible": true							},
				{ "sTitle": "forme",		"bSortable": true,	"sClass": "alignLeft",    	"bVisible": true							},
				{ "sTitle": "carat",		"bSortable": true,	"sClass": "alignRight",  	"bVisible": true							},
				{ "sTitle": "taille",		"bSortable": true,	"sClass": "alignCenter",  	"bVisible": true							},
				{ "sTitle": "couleur",		"bSortable": true,	"sClass": "alignCenter",  	"bVisible": true							},
				{ "sTitle": "pureté",		"bSortable": true,	"sClass": "alignCenter",  	"bVisible": true							},
				{ "sTitle": "poli",			"bSortable": true,	"sClass": "alignCenter",	"bVisible":	(swColonne[11]==1)?true:false	},
				{ "sTitle": "sym",			"bSortable": true,	"sClass": "alignCenter", 	"bVisible":	(swColonne[12]==1)?true:false	},
				{ "sTitle": "prof",			"bSortable": true,	"sClass": "alignRight",  	"bVisible":	(swColonne[13]==1)?true:false	},
				{ "sTitle": "table",		"bSortable": true,	"sClass": "alignRight",  	"bVisible":	(swColonne[14]==1)?true:false	},
				{ "sTitle": "fluo",			"bSortable": true,	"sClass": "alignCenter", 	"bVisible":	(swColonne[15]==1)?true:false	},
				{ "sTitle": "prix/ct",		"bSortable": true,	"sClass": "alignRight",  	"bVisible":	(swColonne[16]==1)?true:false	},
				{ "sTitle": "colette",		"bSortable": true,	"sClass": "alignCenter", 	"bVisible":	(swColonne[17]==1)?true:false	},
				{ "sTitle": "Lg/lg",		"bSortable": true,	"sClass": "alignRight",  	"bVisible":	(swColonne[18]==1)?true:false	},
				{ "sTitle": "délai",		"bSortable": true,	"sClass": "alignRight",  	"bVisible": true							},
				{ "sTitle": "prix",			"bSortable": true,	"sClass": "alignRight",  	"bVisible": true							},
				{ "sTitle": "détail",		"bSortable": false,	"sClass": "alignCenter",  	"bVisible": true							}
			],
			"sAjaxSource": "js/dt/chargementdata33.php" + argurl,
			"bDeferRender": true,
			"bServerSide": true,
			"sDom": "frtiS",
			"oScroller": {
				"loadingIndicator": true
			},
			"oLanguage": {
				"sLoadingRecords": "Chargement en cours...",
				"sZeroRecords": "Aucun diamant n'a pu être trouvé !"
			},
			"sScrollX": "100%",
			"sScrollXInner": coef,
			"fnServerData": function ( sSource, aoData, fnCallback ) {
				aoData.push( { "name": "more_data", "value": "my_value" } );
				$.getJSON( sSource, aoData, function (json) {
					maxref = json.iTotalRecords;
					triref = json.iTotalDisplayRecords;
					nbreference();
					fnCallback(json)
				} );
        	},
		} );
		$(".dataTables_scrollBody").height(example);
		$(".dataTables_scrollHead").height("25px");
	}

Modifié par jytest (08 Feb 2013 - 13:28)