clear interval on mouseout

Question

I'm trying to get a simple image cycle (no transitions) to work where images begin to cycle on mouseover, and stop cycling on mouseout. This works, except for stopping on mouseout. I'm having a hard time figuring out how to clear the interval:

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

How can I get that second-to-last line working?

Edit: fixed a couple of non-code typos

Anyway best practices suggest not to rely on setInterval, which is inconsistent and can cause code to run not syncronized. You should instead use a function calling itself when ended with a setTimeout(). This way you can better control the function timing. — Jose Faeti
– Jose Faeti, Commented Jun 27, 2011 at 8:50
Thank you Jose. I wasn't aware of that but it makes perfect sense. — Jeff
– Jeff, Commented Jun 27, 2011 at 19:18

Niklas · Accepted Answer · 2011-06-27 08:45:17Z

2

Define var infiniteLoop outside of the function, and inside the function set the timeout as infiniteLoop = setInterval... (without var). Full code:

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

answered Jun 27, 2011 at 8:45

Niklas

30k5 gold badges54 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jeff Over a year ago

This is great, thank you very much. Is it possible to change $('.pimg') to use something like $(this 'img') instead so that I can have multiple image cycles per page? My tests using $(this).find() and $(this).children() in place of $('.pimg') are failing.

Declan Cook · Accepted Answer · 2011-06-27 08:47:02Z

1

I think you have a scope issue. try

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

answered Jun 27, 2011 at 8:47

Declan Cook

6,1362 gold badges37 silver badges53 bronze badges

Comments

Jose Faeti · Accepted Answer · 2011-06-27 08:57:53Z

1

you declared infiniteLoop inside a function, which is not avaiable inside the other anonimous function where you are calling it. Just declare that variable outside both functions.

edited Jun 27, 2011 at 8:57

answered Jun 27, 2011 at 8:45

Jose Faeti

12.3k6 gold badges40 silver badges53 bronze badges

Collectives™ on Stack Overflow

clear interval on mouseout

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related