Как сделать рекурсивный таймер Javascript

Question

У меня есть функция, которая загружает эскиз, основанный на ввод номера, как это:

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

Но я не думаю, что я действительно понимаю, таймауты очень хорошо, я пытаясь заставить его непрерывно запускать функцию каждые 10 секунд, увеличивая каждый раз переменную «большой палец».

Этот код вызывает сбой браузера.

Любая идея, что я делаю неправильно?

Answer 1

Вам нужно передать функцию, которая будет вызываться после окончания таймера.

В вашем коде вы немедленно вызываете функцию и передаете ее возвращаемое значение.

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

// 

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

Answer 2

Если вы имеете в виду непрерывно бесконечно использование setInterval вместо:

var delay = 10000; 
var next=3; 
var max=5; 
setInterval(loadThumb, delay); 

function loadThumb() { 
    thumb = next; 
    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; 
    }  
}