SetTimeout dans each [Résolu]

7804j · 11/07/2011, 18h56

Bonjour,

J'ai un problème lorsque je tente de mettre des setTimeout à l'intérieur de each().

Je sais que ce problème est tout à fait normal puisque chaque fois que le each() se répète il efface l'ancien setTimeout() mais je ne sais pas comment trouver une solution ^^'

Voici mon code :

Code :

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

1
2
3
4
 
jQuery(".WindowStyle").each(function(){
setTimeout(function(){jQuery(this).hide();},500);
});

Merci d'avance,

7804j

7804j · 11/07/2011, 21h45

J'ai essayé avec delay, mais cela ne fonctionne pas car l'effet s'exécute immédiatement sans attendre le délai demandé :

Code :

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

1
2
3
4
 
jQuery(".WindowStyle").each(function(){
jQuery(this).delay(500).hide()
});

Aurais-je fait une erreur ?

danielhagnoul · 12/07/2011, 17h38

Bonjour

Citation:

[...] Je sais que ce problème est tout à fait normal puisque chaque fois que le each() se répète il efface l'ancien setTimeout() [...]

J'ai réalisé un test, mais j'étais persuadé que le bon fonctionnement de la méthode setTimeout de l'objet window n'était pas dépendant de sa situation dans la méthode each().

Il se répète simplement autant de fois qu'il y a d'item à parcourir. En fait on obtient une espèce de setInterval qui ne s'exécute qu'un nombre prédéterminé de fois.

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link href='http://fonts.googleapis.com/css?family=Redressed&subset=latin&v2' rel='stylesheet' type='text/css'>
	<style>
		/* Base */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0; padding:0; }
		body {background-color:rgba(210, 214, 98, 0.5); color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:'Redressed', cursive; padding:6px; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur {width:95%; min-width:800px; min-height:300px; margin:12px auto; background-color:#ffffff; color:#000000; border:1px solid #666666; }
 
		/* -- */
	</style>
</head>
<body>	
	<h1>Forum jQuery</h1>
	<section class="conteneur">
		<p id="testID">Un mot pour remplir</p>
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2011-07-12T17:15:00.000+02:00" pubdate>2011-07-12</time> <span itemprop="name">Daniel Hagnoul</span> <a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
	<script>
		$(function(){
			/* -- */
 
			var bool = true,
				objTest = $("#testID"),
				n = 0,
				objsInBody = $("*", "body")
				taille = objsInBody.length;
 
			$.each(objsInBody, function(i, item){
				console.log("i = ", i, ", item = ", item);
 
				window.setTimeout(function(){
					if (bool){
						bool = false;
						n++;
						objTest.fadeIn(1500);
					} else {
						bool = true;
						n++;
						objTest.fadeOut(1500);
					}
 
					console.log("n = ", n);
				}, 2000);
			});
		});
	</script>
</body>  
</html>

Mon test s'exécute dans tous les navigateurs récents, mais, bien entendu, dans mon test le nombre d'itérations dépend du nombre de noeuds (node) dans la partie du DOM qui représente le body. Et ce nombre varie en fonction des navigateurs. C'est la raison pour laquelle on ne doit jamais faire un "next().next()" ou un "prev()prev()" !

Le comportement du setTimeout dans un each() est donc parfaitement logique.

Je crois que si ce comportement ne vous convient pas c'est qu'il a un problème de conception, mais sans le contexte (HTML, CSS, JS, et jQuery) de votre problème...

7804j · 13/07/2011, 11h44

La question n'était pas de savoir si le comportement était logique ou pas mais justement d'en trouver une solution.

Quoi qu'il en soit, j'ai de toute manière procédé autrement afin de ne pas avoir à utiliser de setTimeout.

13/07/2011, 11h44	#4
7804j Invité de passage Jonathan Zimmermann Inscription : juin 2011 Messages : 20 Détails du profil Informations personnelles : Nom : Jonathan Zimmermann Localisation : Suisse Informations forums : Inscription : juin 2011 Messages : 20 Points : 3 Points : 3	La question n'était pas de savoir si le comportement était logique ou pas mais justement d'en trouver une solution. Quoi qu'il en soit, j'ai de toute manière procédé autrement afin de ne pas avoir à utiliser de setTimeout.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email