jQuery 事件处理 .live() 与 setInterval 和clearInterval 的问题

Question

jQuery 1.4.2：

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

$("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()< /code>调用使逻辑更清晰一些，并使用 .data() 而不是作为全局变量。

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) {