How do I stop and start this function on hover

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

I always accept answers that either help or are the correct fix to my issue — DJERock, Dec 27 '12 at 16:59
If no one else's answers solve your questions, you should either post your own answer and accept that, or offer a bounty, or delete the question. Or, as seems to be the case for you, go back and improve your question to be more specific or more clear, so that it *can* be answered to your satisfaction. — Blazemonger, Dec 27 '12 at 17:34
In the case of this question, you should provide some sample HTML and/or a working [fiddle](http://jsfiddle.net) so we can reproduce your problem, as well as clarifying exactly what you mean by "doesn't work right". [Formatting your code cleanly](http://jsbeautifier.org/) will also help us. The easier it is to help you, the more help you'll get! — Blazemonger, Dec 27 '12 at 17:36

the_marcelo_r · Answer 1 · 2012-12-27T17:05:34.007

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

edited Dec 27 '12 at 17:05

answered Dec 27 '12 at 17:00

the_marcelo_r

1,847
22
35

Could you elaborate on what you mean by a flag, an example code for instance, Thank you – DJERock Dec 27 '12 at 17:01
$(".logoContainer").hover(function(){ timeInterval = 25000; },function () { timeInterval = 1000; }) – DJERock Dec 27 '12 at 17:13
I tried using this as the flag but I need to be able to change the interval back to 1000 on mouseout but it continues to run the course of the 25 seconds then changes back... Does this make since? – DJERock Dec 27 '12 at 17:14
Well, if you animate through jQuery you can just use the `stop()` function and it will stop any ongoing animation: http://api.jquery.com/stop/ – the_marcelo_r Dec 27 '12 at 17:18
But for the code you have so far `clearInterval()` should be more suitable, check this question here: http://stackoverflow.com/questions/8443151/how-to-stop-a-settimeout-loop – the_marcelo_r Dec 27 '12 at 17:26
The flag (I am guessing) was the var nex so I changed that then refired the function on out and VOILA! thanks for working with me on this... I posted the final code that worked Thanks Again!! – DJERock Dec 27 '12 at 19:26

Anoop · Answer 2 · 2012-12-27T17:34:31.930

0

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()

edited Dec 27 '12 at 17:34

answered Dec 27 '12 at 17:03

Anoop

23,044
10
62
76

Getting these errors:Uncaught TypeError: Cannot call method 'stop' of undefined jquery.contentcarousel.js:223 (anonymous function) jquery.contentcarousel.js:223 jQuery.event.special.(anonymous function).handle jquery-latest.js:3344 jQuery.event.dispatch jquery-latest.js:3058 elemData.handle.eventHandle jquery-latest.js:2676 Uncaught TypeError: Cannot call method 'start' of undefined jquery.contentcarousel.js:225 (anonymous function) jquery.contentcarousel.js:225 jQuery.event.special.(anonymous function).handle jquery-latest.js:3344 jQuery.event.dispatch jquery-latest.js:3058 elemData.handle – DJERock Dec 27 '12 at 17:08
I think where you are pointing to this.start is not pointing to the right element here – DJERock Dec 27 '12 at 17:22
Sorry, I forgot to create instance of myLoop. – Anoop Dec 27 '12 at 17:35
OK I see what you were doing here but This stalls the animation unless you hover over and i need to run the animation until you hover so this is theoreticaaly backwards LOL – DJERock Dec 27 '12 at 17:44
Hey thanks for working with me on this, I tried it many ways but had to use an alternative method because it kept working backwards of what I was trying to do! But you were very helpful. i posted the code that worked for me Thank You again! – DJERock Dec 27 '12 at 19:28

score 0 · Answer 3 · answered Dec 27 '12 at 19:23

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

How do I stop and start this function on hover

3 Answers3