Question

jQuery 1.4.2：

我有一张图片。当触发鼠标悬停事件时，执行一个运行循环以加载多个图像的函数。相反，mouseout事件需要将图像设置回预定图像并且不再执行循环。这些仅适用于具有“拇指”类的图像：

$("img.thumb").live("mouseover mouseout", function(event) {
    //var foo = $(this).attr('id');
    var wait;
    var i=0;
    var image = document.getElementById(foo);

    if (event.type == 'mouseover') {
        function incrementimage()
        {
            i++;
            image.src = 'http://example.com/images/file_'+i+'.jpg';
            if(i==30) {i=0;}
        }    
        wait = setInterval(incrementimage,500);
    } else if (event.type == 'mouseout') {
        clearInterval (wait);
        image.src = 'http://example.com/images/default.jpg';
    }
    return false;
});

鼠标输出时，图像设置为default.jpg，但浏览器继续循环显示图像。它永远不会停止。有人可以用一些知识打我吗？感谢。

Answer 1

您可以将代码缩短到此以正确清除间隔：

$("img.thumb").live("mouseover", function() {
  var i = 0, image = this, incrementimage = function() {
    i++;
    image.src = 'http://example.com/images/file_'+i+'.jpg';
    if(i==30) {i=0;}
  };
  $(this).data('timer', setInterval(incrementimage,500));
}).live("mouseout", function() {
  clearInterval($(this).data('timer'));
  this.src = 'http://example.com/images/default.jpg';
});

这会分割.live()次调用以使逻辑更清晰，并使用.data()而不是全局变量将先前的wait id存储在元素本身上。

Answer 2

问题是mouseout事件看不到mouseover事件所做的wait。你需要将它存储在其他地方。我建议使用[data()][1]将其存储在元素上。

此外，这个顺序没有意义：

var foo = $(this).attr('id');
...
var image = document.getElementById(foo);

this已经是图片元素。

最后，那不是我定义函数的方式。尝试类似：

$("img.thumb").live("mouseover", function(evt) {
  var wait = $(this).data("wait");
  if (!wait) {
    clearInterval(wait);
  }
  var i = 0;
  var image = this;
  var incrementImage = function() {
    i++;
    image.src = "http://example.com/images/file_" + i + ".jpg";
    if (i == 30) {
      i = 0;
    }
  }
  wait = setInterval(incrementImage, 500);
  $(this).data("wait", wait);
  return false;
});

$("img.thumb").live("mouseout", function(event) {
  var wait = $(this).data("wait");
  if (wait) {
    clearInterval(wait);
  }
  img.src = "http://example.com/default.jpg";
  return false;
});

Answer 3

您是否尝试将var wait移到.live（）事件之外？

var wait
$("img.thumb").live("mouseover mouseout", function(event) {

使用setInterval和clearInterval的.live（）问题处理jQuery事件

3 个答案: