JavaScript/jQuery 鼠标悬停问题

Question

我希望当鼠标悬停在图像上时，应该触发一次事件，并且只有在鼠标离开该图像并再次返回后，并且至少经过 2 秒后，才应该再次触发该事件。 如果我将鼠标悬停在图像

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

代码更新 上，我当前的函数将被连续调用（refreshcash） 这段代码似乎有一个错误，但算法有点逻辑

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

Answer 2

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

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

对于延迟，我建议使用 jQuery 计时器插件 （或类似的插件），它可以简化处理与自己做相比，计时器的数量。您可能想要为计时器命名，并在添加下一个计时器之前尝试停止较旧的计时器。