如何在悬停时停止和启动此功能

Question

I want to stop and start a function on the hover of a container div, I tried myLoop.stop(); reset the variable but it doesn't work right... Any Thoughts???

    //Continuous Scroll
var nex = 1;
var timeInterval = 1000;
$(".logoContainer").hover(function(){
    // Stop Function Here

},function () {
    // Start Function Here
})
function myLoop () { //  create a loop function
setTimeout(function () {    //  call a 3s setTimeout when the loop is called
  if( cache.isAnimating ) return false;
  cache.isAnimating = true;
  aux.navigate( 1, $el, $wrapper, settings, cache );
  nex++; 
  if (nex < 100) {
    myLoop(); 
   }  
  }, timeInterval)
 }
myLoop();

Answer 1

I suggest placing a flag inside your setTimeout function and change this flag according to the event that you want, take a look at this: http://api.jquery.com/hover/

Your code might need some refactoring, how about something like this (pseudo-code):

function callThisFunctionEveryXSeconds(){
    if(continueFlag){
        keepScrolling();
    }
}
$(someDiv).mouseenter() { continueFlag = true; }
$(someDiv).mouseleave() { continueFlag = false; }

Answer 2

Use clearTimeout to stop setTimeout .

var nex = 1;
var timeInterval = 1000;
$(".logoContainer").hover(function(){
        looper.stop();

    },function () {
        looper.start();
    });

function myLoop () { //  create a loop function
    var timeout;
    this.start = function(){
        timeout = setTimeout(function () { 
            cache.isAnimating = true;
            aux.navigate( 1, $el, $wrapper, settings, cache );
            nex++; 
            if (nex < 100) {
                myLoop(); 
            }  
        }, timeInterval);
    }
    this.stop = function () {
        clearTimeout(timeout);
    }
}
var looper = new myLoop()

Answer 3

OK here I had to change the variable that ended the function then reset and fire again on mouseout(hoverOut):

 //Continuous Scroll
var nex = 1,timeInterval = 1000,loop = 0;
function myLoop () { //  create a loop function
    setTimeout(function () {    //  call a 3s setTimeout when the loop is called
        if( cache.isAnimating ) return false;
            cache.isAnimating = true;
            aux.navigate( 1, $el, $wrapper, settings, cache );
            nex++; 
        if (nex < 100) {
            myLoop(); 
        }  
        }, timeInterval)
    }
myLoop();

$(".logoContainer").hover(function(){
    nex = 100;
},(function(){
    nex = 1;
    myLoop();
        })
);