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

possible duplicate of [setTimeout or setInterval?](http://stackoverflow.com/questions/729921/settimeout-or-setinterval) — John Dvorak, Jun 15 '13 at 18:45

score 11 · Accepted Answer · answered Jun 15 '13 at 19:05

11

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

answered Jun 15 '13 at 19:05

george

565
1
5
16

Agreed. I personally faced many problems with `setInterval` in an application with many such loops. `setTimeout` seems to be more reliable. – Gene D. Jun 15 '13 at 19:17
I am very new to jquery! I don't understand how to use this syntax, could you perhaps give me an example? Thanks!! @Konair0s – Kieran Vyas Jun 15 '13 at 20:18
1

It is not jQuery, it is pure JavaScript. `runner()` is a recursive function - it calls itself again after some amount of `time`. I.e. - when first time executed, function `runner()` will set a delay to execute anonymous function (this is what `setTimeout` for), and when time has come, it executes function `runner()` AGAIN, it executes the same function AGAIN. So it becomes basically implementation of `setInterval` function. – Gene D. Jun 15 '13 at 20:23
1

I would prefer to call it a not-evil implementation of `setInterval` @Konair0s – george Jun 15 '13 at 20:32
Great! Got it working perfectly! Dead easy! Thanks a lot. @Konair0s – Kieran Vyas Jun 15 '13 at 22:49
Isn't this a infinite recursive function? Is this a problem in javascript? I'm very new to JS. – geckos Feb 23 '17 at 18:11

j08691 · Answer 2 · 2013-06-15T18:45:16.023

3

Use setInterval and toggle() instead.

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

jsFiddle example

edited Jun 15 '13 at 18:45

answered Jun 15 '13 at 18:37

j08691

204,283
31
260
272

1

this seems like the simplest method? Thanks! – Kieran Vyas Jun 15 '13 at 18:56

PSL · Answer 3 · 2013-06-15T18:44:55.643

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

@JanDvorak Have a look at the demo – PSL Jun 15 '13 at 18:45 — PSL, Jun 15 '13 at 18:45

How to make a setTimeout function continuously loop?

3 Answers3

Demo

Linked