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

代码更新这段代码似乎有一个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

试试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"/>

<强>更新

像这样修改你的代码：

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

Answer 2

你有以某种方式缓存的图像吗？如果您使用src属性替换它们而未在其他地方指定width / height（最好是CSS）或让它们随时可用，那么悬停的框（img元素）将会折叠成较小（或没有）的框，直到图像加载足够远，以便浏览器知道图像的正确尺寸以调整框的大小（这可能会影响调整到图像的其他元素）。确切的效果取决于浏览器，但您可能会丢失导致调用mouseout函数的悬停状态。

我认为这两个图片大小相同，所以如果您还没有，可以尝试将尺寸添加到#cashrefresh的CSS中，看看是否能解决问题。

对于延迟，我建议使用jQuery timers plugin（或类似的），与自己动手相比，这样可以简化定时器的处理。你可能想给你的计时器名字，并在你添加下一个名字之前尝试阻止它们。

JavaScript / jQuery onmouseover问题

2 个答案: