Question

我希望当鼠标悬停在图像上时，应该触发一个事件ONCE，并且只有在鼠标离开该图像并再次返回之后才会再次触发该事件，并且至少还过了2秒。

如果我将鼠标悬停在图像上，它会像每个毫秒一样被调用，并且一旦你将悬停在变量'canhover'上的函数的逻辑变为0，直到你移出鼠标

此代码似乎有一个错误，我无法看到它。我需要一双新的眼睛，但算法有点合乎逻辑

工作代码：

<script type="text/javascript">
var timeok = 1;
function redotimeok() {
    timeok = 1;
}
//
function onmenter()
{
if (timeok == 1) 
    {
  enter();
  timeok = 0;
    }
}
//
function onmleave()
{
  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(onmenter(),onmleave());

尝试：

$('#cashrefresh').hover(onmenter,onmleave);

同样的事情在这里：

setTimeout(redotimeok, 2000); // just the function name

此外，我没有看到您将timeok设置为零的位置。您的意思是在timeok = 0中设置onmenter()吗？

Answer 2

jquery中有两种方法可以解决您的问题：

.mouseenter()和.mouseleave()

查看那里的演示。

编辑：

我认为hover适用于mouseover和mouseout，对不起混淆。

我再次检查了你的代码。当鼠标越过图像时，你似乎正在改变图像，这会迫使浏览器加载新图像，旧图像会消失一段时间，直到出现新图像，我认为这必须连续触发两个处理程序而且你得到了这种行为。

尽量不要更改图片的来源，注释掉该行，而不是console.log("some message")，然后查看该消息是否重复，之前已触发.load()。

希望这有帮助。

Answer 3

尝试更改onmleave函数，如下所示：

   function onmleave()
    {
      setTimeout(redotimeok, 2000);
      leave();
    }

在JS中看不到问题

3 个答案: