Exécution sous condition: setTimeOut/clearTimeOut [Résolu]

[mathieu.smartin]

Bonjour à tous (ou bonsoir!)

Je suis loin d'être un crack en JS, et j'apprends sur le tas par tutoriel du coup, là, je suis vraiment bloqué sur un truc, qui ne doit pas être si compliqué:

Je souhaite, au survol de la souris sur un lien, afficher un div(#desc) avec un délai de 500ms.

Jusque là, pas de problème, j'utilise l'event "onMouseOver" dans mon lien, qui appel la fonction setTimeOut("FonctionAffichageDiv()",500).

Oui, mais. Je souhaiterais que cette fonction ne s'éxécute que lorsque l'internaute reste au moins 500 ms sur le lien. Autrement dit, si l'internaute reste moins de 500 ms sur le lien, je ne veux pas afficher le div #desc

J'ai pensé à clearTimeOut, mais je ne comprends pas vraiment comment m'en servir.

De manière hyper simplifiée (mon code est plus compliqué en vrai, j'ai tout viré le php et autre JS...)

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<script type="text/javascript">
function Preview()
{
$('#desc').fadeIn("slow");
 
}
 
function displayPreview()
{
	setTimeOut("Preview()",500);
}
</script>
 
<a href="index.php?idbook=3" onMouseOver="displayPreview()">BookName</a>

Merci de votre aide!

[Willpower]

ta requête n'est pas facile (ou alors je suis trop débutant pour voir la solution "facile").

en gros, une fois ta souris sur ton lien, ça déclenche un événement, mais après ton délai il est difficile de savoir où se trouve ta souris car il n'y a pas de nouvel événement de déclenché.

je te propose donc d'avoir une variable qui enregistre si ta souris est ou non sur ton lien grace à l'événement onmouseout (combiné à onmouseover).

comme par exemple

Code html :

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
var mouseOver;
function Preview()
{
    if( !mouseOver ) return true;
    $('#desc').fadeIn("slow");
}
</script>
 
<a href="index.php?idbook=3" onmouseover="mouseOver=1;setTimeOut(Preview,500);" onmouseout="mouseOver=0;">BookName</a>

ps: je n'ai pas testé, donc j'ignore si je n'ai pas fait d'erreur, tiens-moi au courant.

[Bovino]

Pour pouvoir utiliser clearTimeout(), il faut avoir nommé setTimeout() :

Code :

1
2
3
4
5
6
7
var elem = document.getElementById('element'), timer;
elem.onmouseover = function(){
    timer = setTimeout(Preview,500);
};
elem.onmouseout = function(){
    if(timer){clearTimeout(timer);}
};

Mais puisque tu utilises jQuery apparemment, il y a plus simple :

Code :

1
2
3
4
5
$('#elem').hover(function(){
    $('#desc').delay(500).fadeIn();
}, function(){
    $('#desc').stop();
});

[mathieu.smartin]

Merci à tous les deux pour vos promptes réponses.

J'ai essayé d'abord celle de Will, mais je n'ai pas réussi à la mettre en œuvre.

Bovino, la solution en jquery n'a pas tout à fait l'effet escompté (la méthode .stop stoppe l'animation fadeIn, qui, si elle a commencé à s'afficher, reste dans son état d'opacité intermédiaire!).

Par contre, j'ai tenté la solution JS sans jquery, et ça marche! J'ai mis quelques petites secondes à l'adapter car:

Ce que je souhaite mettre exactement en place est ceci :
- j'ai une liste de liens vers des livres (le idbook est l'identifiant du livre, le tout généré par du php), qui sont tous de la même classe "preview" telle que lorsqu'on clique on est renvoyé vers la page book (qui affiche les informations complètes relatives à un livre).

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?php
//Requête qui récupère les livres (de la table book)
$query=$dbbooks->query('SELECT idbook FROM book');
$string='';
while($query=$array->fetch())
{
$idbook=$array['idbook'];
$string=$string . "<a href=\"book.php?idbook=$idbook\" class=\"preview\" >Livre $idbook</a>"; //par la suite, on ajoutera onMouseOver et onMouseOut
}
echo $string;
$query->closeCursor();
?>

- au survol de chaque lien, je souhaite donc affiche le div #desc (pour "description") qui donne un aperçu de ce que contient la page book (en réalité, le div #desc contient la couverture, le synopsis tronqué et le titre, grâce à de l'AJAX). Pour simplifier, disons que je souhaiterais pouvoir afficher dans le div #desc, l'identifiant (idbook) du livre.

Je mets donc ma "solution" complète, qui est sûrement pas la plus légère mais qui réjouira (je l'espère) les gens qui cherche à faire ce genre de choses:

Code hmtl :

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
 
<html>
<head>
<style>
body{
width:400px;
}
 
#desc{
display:none;
width:200px;
height:200px;
border:1px solid black;
float:right;
}
</style>
</head>
<body>
<script charset="utf-8" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function Preview(idbook)
{
$('#desc').fadeIn("slow");
document.getElementById('desc').innerHTML="Livre numéro " + idbook;
}
 
var timer;
function timerIn(idbook){
var string="Preview(" + idbook + ")";
    timer = setTimeout(string,500);
};
function timerOut(){
    if(timer){clearTimeout(timer);}
};
 
</script>
<a href="book.php?idbook=1" class="preview" onMouseOver="timerIn(1)" onMouseOut="timerOut()" >Livre 1</a><br /><br/>
<a href="book.php?idbook=2" class="preview" onMouseOver="timerIn(2)" onMouseOut="timerOut()">Livre 2</a><br /><br/>
<a href="book.php?idbook=3" class="preview" onMouseOver="timerIn(3)" onMouseOut="timerOut()">Livre 3</a><br /><br/>
<div id="desc"></div>
<a href="" onClick="$('#desc').fadeOut(400);">Close</a>
</body>
</html>

Il doit y avoir plus élégant, notamment avec jQuery, mais je suis pas encore assez calé avec cette bibliothèque, que j'ai récupérer pour mettre en place des fondus, des slideshows, etc. Ici, dans mon code, il est clair que c'est presque inutile.