Question

I’ve been trying to figure out how I could temporary stop the timer on the setInterval() function. I’m using it to rotate through a banner and I would like it to “reset the timer” or stay on a particular image longer if the thumbnail is clicked.

I already have the event handler for the the click setup.

This is what I have so far:

(Note: other code excluded for simplification)

//Set interval of fade effect
setInterval( "bannerRotate()", 7000 );

//Click function for banner thumbnails
$('#banner ul li .banner_thumb').click(function(){

    $('#banner ul li .banner_thumb').parent().removeClass("selected");
    $(this).parent().addClass("selected");
    //this is where I tried to make it wait but obviously this didn't work 
    setTimeout("bannerRotate()", 10000);    

});

Any suggestions/ help would be great! 🙂

Answer 1

var timeoutId = 0;

function startCountdown() {
   timeoutId = setTimeout(function () {
       bannerRotate();
   }, 7000); 
}

function bannerRotate() {
    ...
    startCountdown(); // Otherwise it will just run once
}

$('#banner ul li .banner_thumb').click(function(){
    $('#banner ul li .banner_thumb').parent().removeClass("selected");
    $(this).parent().addClass("selected");

    // Clear the existing timeout then restart after 10 seconds
    clearTimeout(timeoutId);

    setTimeout(function () {
        startCountdown();
    }, 10000);    
});