在jQuery的live事件mouseOver/mouseOut中使用setInterval

Question

大家好!
我试图在用户mouseOver元素时启动一个计时器并在mouseOut上停止它.元素是动态创建的,这是使用live方法的原因.

所以我的计时器正确启动,但我无法阻止它!怎么了？

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