マウスオーバー時のクリア間隔

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

2番目の最後のラインはどうすれば動作させることができますか？

編集：

Answer 1

関数のvar infiniteLoop外側を規定する非コードタイプミスのカップルを固定し、関数内（varなし）infiniteLoop = setInterval...としてタイムアウトを設定します。全コード：

​​3210

Answer 2

あなたはそれを呼び出している他のanonimous関数内盛ない関数、内部の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); 
});