在jQuery的直播活動中使用setInterval mouseOver/mouseOut

Question

嘿傢伙！
我試圖啓動一個計時器，當用戶mouseOver一個元素，並停止在mouseOut。元素是動態創建的，這就是使用活動方法的原因。

所以我的計時器開始正確，但我無法阻止它！怎麼了？

$elems.live('mouseover mouseout', function(event) { 
     var self = $(this), i = 0; 

     if (event.type == 'mouseover') { 
      var timer = setInterval(function() { 
       // change the src of the current element for an element of an array of src, much like in a slideshow 
       self.attr('src', tabSrc[i]); 
       i === 2 ? i = 0 : i++; 
      }, 1000); 
     } 
     // Handle the mouseOut 
     else { 
      // stop the timer <------ when I mouseOut the element, this doesn't seems to work... 
      clearInterval(timer); 
     } 
    }); 

Answer 1

你timer變量不正確範圍，它需要處理程序外，這樣的：

var timer; 
$elems.live('mouseover mouseout', function(event) { 
    var self = $(this), i = 0; 

    if (event.type == 'mouseover') { 
     timer = setInterval(function() { 
      self.attr('src', tabSrc[i]); 
      i === 2 ? i = 0 : i++; 
     }, 1000); 
    } 
    else { 
     clearInterval(timer); 
    } 
}); 

，或者可選地使用$.data()存儲每個元件的間隔，這樣的：

$elems.live('mouseover', function() { 
    var self = $(this), i = 0; 
    $.data(this, 'timer', setInterval(function() { 
     self.attr('src', tabSrc[i]); 
     i === 2 ? i = 0 : i++; 
    }, 1000)); 
}).live('mouseout', function() { 
    clearInterval($.data(this, 'timer')); 
});