JavaScript/jQuery onmouseover问题

Question

我希望当鼠标悬停在图像上时，应触发一次事件，并且只有在鼠标离开该图像并再次返回并且至少经过 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");
}

代码更新 这段代码好像有bug，但是算法还算合乎逻辑

<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

尝试悬停:

$('#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"/>

更新:

像这样修改你的代码:

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