Ralentir un while

**olbouss** · 22/06/2009, 12h23

Bonjour

Je cherche à modifier la hauteur d'un élément en modifiant progressivement sa largeur (l'élément contient du texte sur trois lignes, donc j'élargie jusqu'à ce que celà passe en deux lignes, je le détecte parce qu'à ce moment la hauteur de lélément change).

Code :

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

1
2
3
4
5
6
7
 
var hMaxElem = maxElem.height() ;
 
while ( maxElem.height() == hMaxElem ) {	
	hMaxElem = maxElem.height() ;
	maxElem.width(maxElem.width()+1) ;
}

Celà fonctionne mais au ralenti seulement !

Si j'incrémente de 10, ça marche, si je passe à 1 pour être plus fin, le navigateur patinne et plante.

Y a t'il un moyen pour ralentir le while ?

**marcha** · 22/06/2009, 19h15

Salut,

une option possible, c'est d'utiliser un timer, l'avantage
c'est qu'entre deux appels, ça rend la main au système
et laisse le temps au navigateur de mettre à jour le div.

Code :

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

1
2
3
4
5
6
7
8
9
var hMaxElem = maxElem.height() ;
 
var timer = setInterval(function() {
   if(maxElem.height() == hMaxElem ) {	
	hMaxElem = maxElem.height() ;
	maxElem.width(maxElem.width()+1) ;
  }
  else clearInterval(timer);
}, 20);

**danielhagnoul** · 22/06/2009, 19h44

Bonsoir.

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style type="text/css">
		body {
			background-color:#696969;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:"Times New Roman", Times, serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid red;
			font-size:0.8em;
		}
	</style>
	<!-- <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> -->
	<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
		$(window).ready(function(){
			var helem = $("#maxElem").height();
			var welem = $("#maxElem").width();
			var offset = parseInt($("#maxElem").css("fontSize"));
 
			alert(helem + ', ' + welem + ', ' + offset);
 
			for (var i = 0; $("#maxElem").height() == helem; ++i){
				$("#maxElem").width($("#maxElem").width() + offset);
			}
 
			welem = $("#maxElem").width();
			helem = $("#maxElem").height();
 
			alert(helem + ', ' + welem);
 		});
	</script>
</head>
<body>
	<div id="conteneur">
		<div id="maxElem" style="width:600px; height:auto; border:1px solid red;">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt pulvinar elit. Maecenas nec risus vitae felis suscipit scelerisque. Suspendisse placerat lorem ut nisl. Sed sit amet quam sit amet elit tempus eleifend. Aliquam posuere egestas elit.
		</div>
	</div>
</body>
</html>

**danielhagnoul** · 11/01/2010, 09h54

Bonjour.

Il faut utiliser $(window).load() et non $(window).ready()

La nouvelle documentation sur l’API jQuery 1.4 est très claire sur ce point.

L’événement ready est exclusivement destiné à l’usage suivant :

Code :

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