Как сделать рекурсивный таймер в Javascript - PullRequest
Новая
       13

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

1 голос
/ 14 декабря 2011

У меня есть функция, которая загружает миниатюру на основе введенного числа, например: 

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 секунд, увеличивая переменную «thumb» каждый раз.

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

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

Ответы [ 2 ]

2 голосов
/ 14 декабря 2011

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

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

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

 // 

rotate=setTimeout(function() {
    loadThumb(next);
}, 5000);
0 голосов
/ 14 декабря 2011

Если вы имеете в виду непрерывно как бесконечно, используйте вместо этого 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;
    }    
}
...