Перебор SetTimeout

Question

У меня есть следующий код:

$(function(){ 
    setTimeout(function(){ 
    $('.testimonial1').css("display", "none"); 
    $('.testimonial2').css("display","block"); 
} ,3000); 

setTimeout(function(){ 
    $('.testimonial2').css('display', 'none'); 
    $('.testimonial3').css('display', 'block'); 
}, 6000); 


}); 

Вопрос заключается в том, что она выполняется только один раз. Я бы хотел после второго таймаута вернуться к первому тайм-ауту и ​​так далее.

Для любых разъяснений, пожалуйста, посоветуйте.

Answer 1

Вы можете использовать функцию setInterval в JQuery.

Вот рабочий пример: JSFiddle setInterval

EDIT 1: Обновлено JSFiddle связь с FadeIn/эффектами FADEOUT и добавил код ниже:

Javascript

var refreshId = setInterval(function() { 
    setTimeout(function() { 
     $('#t1').fadeOut("slow", function() { 
      $('.testimonial1').css("display", "none"); 
     }); 
     $('#t2').fadeIn("slow", function() { 
      $('.testimonial2').css("display", "block"); 
     }); 
    }, 3000); 

    setTimeout(function() { 
     $('#t2').fadeOut("slow", function() { 
      $('.testimonial2').css("display", "none"); 
     }); 
     $('#t3').fadeIn("slow", function() { 
      $('.testimonial3').css("display", "block"); 
     }); 
    }, 6000); 

}, 6000); 

HTML

<div id="t1" class="testimonial1">Testimonial 1</div> 
<div id="t2" class="testimonial2">Testimonial 2</div> 
<div id="t3" class="testimonial3">Testimonial 3</div> 

CSS

.testimonial1 { 
    display : block; 
} 
.testimonial2 { 
    display : block; 
} 
.testimonial3 { 
    display : block; 
} 

Answer 2

Попробуйте это:

$(function() { 
    function func1() { 
    setTimeout(function(){ 
     $('.testimonial1').css("display", "none"); 
     $('.testimonial2').css("display","block"); 
     func2(); 
    } ,3000); 
    } 

    function func2() { 
    setTimeout(function(){ 
     $('.testimonial2').css('display', 'none'); 
     $('.testimonial3').css('display', 'block'); 
     func1(); 
    }, 6000); 
    } 

    func1(); 
}); 

Answer 3

Вы можете попробовать обернув его с setInterval

function play() { 
     setTimeout(function(){ 
     $('.testimonial1').css("display", "none"); 
     $('.testimonial2').css("display","block"); 
    } ,3000); 



    setTimeout(function(){ 
     $('.testimonial2').css('display', 'none'); 
     $('.testimonial3').css('display', 'block'); 
    }, 6000); 
        } 


    setInterval(play , 6000);