JavaScript/jQuery-onmouseover问题

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

函数refreshcash（）{
$（“#showname”）.load（“./includes/do#u name.inc.php”）；
$（“#cashfresh”）.attr（“src”、“images/refinconani.gif”）；
}
函数normalimg（）{
$（“#cashfresh”）.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>

var canhover=1；
var-timeok=1；
函数redotimeok（）{
timeok=1；
}
//
函数onCenter（）
{
if（canhover==1&&timeok==1）
{
输入（）；
canhover=0；
}
}
//
函数
{
离开（）；
canhover=1；
setTimeout（redotimeok（），2000）；
离开（）；
}
//
$（'#cashfresh'）。悬停（oncenter（），onmleef（））；
函数enter（）{
$（“#showname”）.load（“./includes/do#u name.inc.php”）；
$（“#cashfresh”）.attr（“src”、“images/refinconani.gif”）；
}
函数休假（）{
$（“#cashfresh”）.attr（“src”、“images/reficon.png”）；
}

尝试

悬停

：

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

---

您是否以某种方式缓存了图像？如果用它们的

src

属性替换它们，而不在其他地方指定

width

/

height

（最好是CSS）或让它们随时可用，则悬停框（

img

元素）将塌陷为较小的（或不）框，直到图像已加载到足以让浏览器知道图像的正确尺寸以调整框的大小（这可能会影响调整到图像的其他元素）。确切的效果取决于浏览器，但您可能会失去悬停状态，从而调用mouseout函数

我假设两个图像的大小相同，因此如果您还没有，可以尝试将维度添加到CSS中，以便

#cashfresh

，看看这是否解决了问题

---

对于延迟，我建议使用（或类似的一个），与单独使用相比，它可以简化计时器的处理。你可能想在添加下一个计时器之前给出你的计时器名称并试图阻止旧的计时器。

@Sarfraz:只是好奇：你为什么在5秒内更改了2秒？@Marcel Korpel:我没有，只是用Cntr+K格式化了代码，我认为这不应该取代任何字符：）@Sarfraz:那很奇怪……；）@Marcel Korpel：我也想知道同样的情况，不知道为什么会发生，我只是格式化了代码，我没有理由改变它，看起来像个bug，虽然这以前从未发生过：）我把5秒改为2秒，因为5秒太多了。你们在说什么？如果我加上这个，鼠标悬停在图像上的每秒钟调用一次函数#cashfresh如果我忘记将鼠标放在图像上，那么文件do_name.inc.php每2秒调用一次。我希望在您将鼠标悬停在图像上时只调用一次代码，并且图像应该更改，并且为了防止滥用快速鼠标悬停，它应该每2秒仅可用一次。请重新检查我的问题，也许您可以帮助我：）编辑只会引入延迟-它不会限制更改的速率。

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