How to make a setTimeout function continuously loop?

Question

How can I make a setTimeout function continuously loop?

For example

setTimeout(function(){  
        $(".slide2").hide();
        $(".slide").show();
        setTimeout(function(){
            $(".slide").hide();
            $(".slide2").show();
        }, 1000);
    }, 1000);

Answer 1

setInterval is actually evil, if the code inside the setInterval takes longer than the time you have set it will create another process before the function finishes messing everything up. So choosing setTimeout is actually better.

To make a function loops in setTimeout use a following syntax:

function function1() {
    console.log({} + [] + " = {} + []"); // run this it is actually funny
}

function runner() {
    function1();
    setTimeout(function() {
        runner();
    }, time);
}

runner();

Answer 2

You can reduce your nesting, and probably use setTimeout and toggle will take care of the rest (show your first element by default before executing.).

function slideEm()
{
    $(".slide2").toggle(); 
    $(".slide").toggle(); // Make this visible first
    window.setTimeout(slideEm, 1000);
}

slideEm();

Or use setInterval

function slideEm()
{
    $(".slide2").toggle(); 
    $(".slide").toggle(); // Make this visible first

}

$(function(){
     $('.slide').show(); //Using css hide both of them and show this first
    window.setInterval(slideEm, 1000); // start the callback loop with a sec interval
});

Demo

Answer 3

Use setInterval and toggle() instead.

setInterval(function () {
    $(".slide2").toggle();
    $(".slide").toggle();
}, 1000);

jsFiddle example