如何做一個遞歸計時器在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; 
    }  
}