JavaScript/jQuery onmouseover problem

Question

Я хочу, чтобы при мыши над изображением событие должно запускаться ONCE, и оно должно запускаться снова только после того, как мышь вышла из этого изображения и обратно, а также прошло не менее 2 секунд , Моя текущая функция вызывается непрерывно (refreshcash), если я оставлю мыши над моим изображением

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

обновление кода Этот код, кажется, есть ошибка, но алгоритм своего рода логический

<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

У вас есть изображения кэшируются в некотором роде? Если вы замените их на свой атрибут src без указания width/height в другом месте (лучше всего было бы CSS) или с их легкодоступными, тогда зависающий ящик (img элемент) рухнет в меньшую (или нет) область, пока изображение не будет загружено далеко достаточно, чтобы браузер знал правильные размеры изображения, чтобы изменить размер окна (что может повлиять на другие элементы, которые будут отрегулированы для изображения). Точный эффект зависит от браузера, но вы можете потерять состояние зависания, вызывающее вызов вашей мыши.

Я предполагаю, что оба изображения одного размера, поэтому, если вы этого еще не сделали, вы можете попробовать добавить размеры к своему CSS для #cashrefresh и посмотреть, устраняет ли это проблему.

Для задержки я бы рекомендовал использовать jQuery timers plugin (или аналогичный), который упрощает обработку таймеров по сравнению с выполнением его самостоятельно. Вероятно, вы захотите дать имена ваших таймеров и попытаться остановить старые, прежде чем добавлять следующий.

Answer 2

Try hover:

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

И ваше изображение должно выглядеть следующим образом:

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

Update:

Измените код следующим образом:

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