Ralentir un while

Version imprimable

22/06/2009, 12h23
olbouss

Ralentir un while
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:

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 ?

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:

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

Bonsoir.

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

11/01/2010, 09h54
danielhagnoul

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:

$(document).ready(function(){…});

ou

Code:

$(fonction(){…});

dans sa forme abrégée.

Pour window nous devons, et nous aurions déjà dû sous jQuery 1.3.2, utilisez l’événement load :

Code:

$(window).load(fonction(){…});

Il n’y a pas de forme abrégée.