JavaScript/jQuery onmouseover problème

Question

Je veux que lorsque la souris est sur une image, un événement devrait être déclenché une fois, et il devrait être déclenché à nouveau seulement après que la souris est hors de cette image et de retour, et aussi au moins 2 secondes . Ma fonction actuelle est appelée en continu (refreshcash) si je laisse la souris sur mon image

<img src="images/reficon.png" onmouseover="refreshcash()" onmouseout="normalimg()" id="cashrefresh"/> 

function refreshcash() { 
$("#showname").load('./includes/do_name.inc.php'); 
$("#cashrefresh").attr("src","images/reficonani.gif"); 
} 

function normalimg() { 
$("#cashrefresh").attr("src","images/reficon.png"); 
} 

mise à jour de code Ce code semble avoir un bug, mais l'algorithme est un peu logique

<script type="text/javascript"> 
var canhover = 1; 
var timeok = 1; 
function redotimeok() { 
    timeok = 1; 
} 
// 
function onmenter() 
{ 
if (canhover == 1 && timeok == 1) 
    { 
    enter(); 
    canhover = 0; 
    } 
} 
// 
function onmleave() 
{ 
    leave(); 
    canhover = 1; 
    setTimeout(redotimeok(), 2000); 
    leave(); 
} 
// 
$('#cashrefresh').hover(onmenter(),onmleave()); 

function enter(){ 
    $("#showname").load('./includes/do_name.inc.php'); 
    $("#cashrefresh").attr("src","images/reficonani.gif"); 
} 

function leave(){ 
    $("#cashrefresh").attr("src","images/reficon.png"); 
} 
</script> 

Answer 1

Avez-vous les images mises en cache en quelque sorte? Si vous les remplacez par leur attribut src sans spécifier width/height ailleurs (le mieux serait CSS) ou les avoir facilement disponibles alors la case planifiée (élément img) se repliera dans une plus petite (ou non) boîte jusqu'à ce que l'image ait été chargée loin assez pour que le navigateur connaisse les dimensions correctes de l'image pour redimensionner la boîte (ce qui peut affecter d'autres éléments étant ajustés à l'image). L'effet exact dépend du navigateur, mais vous risquez de perdre l'état du hover provoquant l'appel de votre fonction mouseout.

Je suppose que les deux images sont de la même taille, donc si vous ne l'avez pas déjà fait, vous pouvez essayer d'ajouter les dimensions à votre CSS pour #cashrefresh et voir si cela résout le problème.

Pour le délai je recommanderais d'utiliser le jQuery timers plugin (ou un similaire) qui facilite la manipulation des minuteurs par rapport à le faire seul. Vous voudrez probablement donner des noms à vos timers et essayer d'arrêter les plus anciens avant d'ajouter le suivant.

Answer 2

Essayez le hover:

$('#cashrefresh').hover(function(){ 
    $("#showname").load('./includes/do_name.inc.php'); 
    $("#cashrefresh").attr("src","images/reficonani.gif"); 
}, function(){ 
    $("#cashrefresh").attr("src","images/reficon.png"); 
}); 

Et votre image devrait ressembler à:

<img src="images/reficon.png" id="cashrefresh"/> 

Mise à jour:

Modifier votre code comme ceci:

var e = null; 
var l = null; 

$('#cashrefresh').hover(function(){ 
    e = setTimeout(enter, 2000) 
}, function(){ 
    l = setTimeout(leave, 2000) 
}); 

function enter(){ 
    $("#showname").load('./includes/do_name.inc.php'); 
    $("#cashrefresh").attr("src","images/reficonani.gif"); 
    clearTimeout(e); 
} 

function leave(){ 
    $("#cashrefresh").attr("src","images/reficon.png"); 
    clearTimeout(l); 
}