очистить интервал при наведении мыши

Question

Я пытаюсь заставить работать простой цикл изображений (без переходов), когда изображения начинают циклически перемещаться при наведении курсора мыши и прекращают циклически повторяться при наведении курсора мыши.Это работает, за исключением остановки мыши.Мне трудно понять, как очистить интервал:

var itemInterval = 750; 
var numberOfItems = $('.portrait img').length;          
//set current item
var currentItem = 0;             
//show first item
$('.pimg').eq(currentItem).show();           

$('.portrait').hover(function() {                       
    //loop through the items
    var infiniteLoop = setInterval(function(){
        $('.pimg').eq(currentItem).hide();
        if(currentItem == numberOfItems -1){
            currentItem = 0;
        }else{
            currentItem++;
        }
        $('.pimg').eq(currentItem).show();
    }, itemInterval);
},
function() {
    clearInterval(infiniteLoop);
});

Как мне заставить работать эту вторую строку?

Редактировать: исправленопара некодовых опечаток

Answer 1

Определите var infiniteLoop вне функции, а внутри функции установите время ожидания как infiniteLoop = setInterval... (без var). Полный код:

var infiniteLoop;
$('.portrait').hover(function() {                       
    //loop through the items
    infiniteLoop = setInterval(function(){
        $('.pimg').eq(currentItem).hide();
        if(currentItem == numberOfItems -1){
            currentItem = 0;
        }else{
            currentItem++;
        }
        $('.pimg').eq(currentItem).show();
    }, itemInterval);
},
function() {
    clearInterval(infiniteLoop);
});

Answer 2

вы объявили infiniteLoop внутри функции, которая недоступна внутри другой анонимной функции, где вы ее вызываете. Просто объявите эту переменную вне обеих функций.

Answer 3

Я думаю, что у вас есть проблема с объемом. попробовать

var itemInterval = 750; 
var numberOfItems = $('.portrait img').length; 
var infiniteLoop = null;      
//set current item
var currentItem = 0;             
//show first item
$('.pimg').eq(currentItem).show();           

$('.portrait').hover(function() {                       
    //loop through the items
    infiniteLoop = setInterval(function(){
        $('.pimg').eq(currentItem).hide();
        if(currentItem == numberOfItems -1){
            currentItem = 0;
        }else{
            currentItem++;
        }
        $('.pimg').eq(currentItem).show();
    }, itemInterval);
},
function() {
    clearInterval(infiniteLoop);
});