Question

I have a function that loads a thumbnail based on a number input like this:

var delay = 10000;
var next=3;
var max=5;
rotate=setTimeout(loadThumb(next), delay);  
function loadThumb(thumb) {
    var newBackground = $('.heroThumb'+thumb+' img').attr('src');
    $('.heroImage').css({'background' : 'url('+newBackground+') center right     no-repeat', 'width' : '660px', 'height' : '290px', 'background-size' : '100%' });
    $('.homeHeroTitleBG').html($('.homeHeroTitleContent' + thumb).html());
    $('.homeHeroThumb').each(function(event) {
           $(this).removeClass('active');
    });
    $('.heroThumb'+thumb).parent('div').addClass('active');
    next=thumb+1;
    if(next > max){
        next = 1;
    }
    next=thumb+1;
    if(next > max){
        next = 1;
     }
    rotate=setTimeout(loadThumb(next), 5000);
}

But I don’t think I really understand timeouts very well, I’m trying to get it to continuously run the function every 10 seconds incrementing the “thumb” variable each time.

This code causes the browser to crash.

Any idea what i’m doing wrong?

Answer 1

You need to pass a function to be invoked after the timer runs out.

In your code, you’re calling the function immediately, and passing its return value.

rotate=setTimeout(function() {
    loadThumb(next);
}, delay);

 // 

rotate=setTimeout(function() {
    loadThumb(next);
}, 5000);