ホバー上でsetIntervalを開始し、マウスアウト時に停止

Question

ホバーにループを開始しようとしています。ホバーを一時停止するかマウスオーバーで停止します。 mouseoutは機能しますが、ループは最初はホバーだけでなく開始します。

// Loop trough a set of images 
var loop = setInterval(function(){ 
    rotator.src = dir + num+'.jpg'; 
    num = (num === len) ? 0 : ++num; 
}, delayInMilliseconds); 


// The loop should only start on hover 
$('#rotator').hover(

    function() { 
    console.log('hover'); 
    }, 

    // The loop should stop on mouseout 
    function() { 
    clearInterval(loop); 
    console.log('no hover'); 
    } 

) 

Answer 1

var interval = null; 

function animatedCode() { 
    rotator.src = dir + num+'.jpg'; 
    num = (num === len) ? 0 : ++num;} 

//Stop and start on hover 
$('#rotator').hover(function() { 
    interval = window.setInterval(function(){animatedCode()},delayInMilliseconds); 

}, function() { 
    window.clearInterval(interval); 
});