Javascript timer to switch functions

Question

I have three functions called toggle1(), toggle2(), toggle3() linked to my html.

I want to make a timer to call each function with a delay of 5 seconds (5seconds for testing).

I wrote this code, but it doesn't work. Any tips on how to make it work?

I have used function init() when the page loads

function timer() {
    var i = 1;
    var delay = 5000;
    for (i, i = 3, i++) {
        switch (i) {
            case 1:
                toggle1();
                delay;
                break;
            case 2:
                toggle2();
                delay;
                break;
            case 3:
                toggle3();
                delay;
                break;
        }
    }
}

To make it work, your code should be something like this. [Fiddle](http://jsfiddle.net/tu91ex10/1/). — Mr_Green, Aug 11 '14 at 12:13

score 0 · Answer 1 · answered Aug 11 '14 at 12:01

0

First problem is your for loop is wrong, changing it to this should get you started:

for (var i = 0; i < 3; i++) {

Also, the delay variable in each switch statement is redundant. Try changing the for loop first, that should start you off in the write direction.

answered Aug 11 '14 at 12:01

royse41

2,310
4
22
29

1

and also use of `delay` variable seems useless. – Mr_Green Aug 11 '14 at 12:02
@Mr_Green have changed my answer to be more of a starting point – royse41 Aug 11 '14 at 12:04

score 0 · Answer 2 · answered Aug 11 '14 at 12:02

0

You have two basic syntactical problem which can cause issue

1) Syntax of for loop doesn't separated by , there should be ;.

2) And there should be i<=3. You have i=3 which will always be true.

for (i; i=3;i++){...}

answered Aug 11 '14 at 12:02

Mritunjay

25,338
7
55
68

user3917789 · Answer 3 · 2014-08-11T12:19:08.323

0

function init () {
    timer(1);
}
function timer(n) {
    var delay = 5000;
    switch (n) {
        case 1:
            toggle1();
            setTimeout(function(){ timer(2); }, delay)
            break;
        case 2:
            toggle2();
            setTimeout(function(){ timer(3); }, delay)
            break;
        case 3:
            toggle3();
            break;
    }
}

edited Aug 11 '14 at 12:19

answered Aug 11 '14 at 12:09

user3917789

90
4

score 0 · Answer 4 · answered Aug 11 '14 at 12:17

Try using the setInterval function.

var counter = 0;

function Toogle1() {
    console.log("1");
}

function Toogle2() {
    console.log("2");
}

function Toogle3() {
    console.log("3");
}


function TimeMachine() {
    switch (counter) {
        case 0:
            Toogle1();
            counter++;
            break;

        case 1:
            Toogle2();
            counter++;
            break;

        default:
            Toogle3();
            counter = 0;
            break;
    }
}

setInterval("TimeMachine()", 1000);

jsFiddle

score 0 · Answer 5 · answered Aug 11 '14 at 12:31

0

delayedExec([toggle1, toggle2, toggle3], 5000);

function delayedExec(fns, delay, index) {
    index = index || 0;
    if (index === fns.length) return;
    fns[index]();
    setTimeout(delayedExec.bind(null, fns, delay, ++index), delay);
}

answered Aug 11 '14 at 12:31

plalx

42,889
6
74
90

score 0 · Answer 6 · answered Aug 11 '14 at 12:32

<html>
    <head>
    <script type="text/javascript">
    var
    hMsg,
    CntFunc = {
        curr: 0,
        funcList: [],

        play: function () {
            CntFunc.funcList[CntFunc.curr]();
            CntFunc.next();
        },

        next: function () {
            if (CntFunc.curr >= CntFunc.funcList.length-1)
                CntFunc.curr = 0;
            else {
                CntFunc.curr++;
                setTimeout(CntFunc.play, 5000);
            }
        }
    };

    var toggle1 = function() {hMsg.innerHTML = "1";}
    var toggle2 = function() {hMsg.innerHTML = "2";}
    var toggle3 = function() {hMsg.innerHTML = "3";}

    window.onload = function () {
        hMsg = document.getElementById("msg");
        CntFunc.funcList = [toggle1, toggle2, toggle3];
        CntFunc.play();
    }
    </script>
    </head>
    <body>
        <div id="msg"></div>
    </body>
</html>

score -1 · Answer 7 · edited May 23 '17 at 10:26

-1

You can implement your own sleep-method and use it like this:

toggle1();
sleep(5000);
toggle2();
sleep(5000);
toggle3();

Stackoverflow: sleep method for java script

Sure this is quite straight forward/naive.

edited May 23 '17 at 10:26

Community

1
1

answered Aug 11 '14 at 12:03

Sir Tobi

142
1
8

The comments below of that post doesn't suggest to go with this method. – Mr_Green Aug 11 '14 at 12:05
have you read the comments on this answer? that's the only "naive" part! – royse41 Aug 11 '14 at 12:05

Javascript timer to switch functions

7 Answers7

Linked