Использование setInterval в живых событиях jQuery mouseOver / mouseOut

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