Javascript计时器切换功能

时间:2014-08-11 11:58:30

标签: javascript timer switch-statement

我有三个名为toggle1()toggle2()toggle3()的函数链接到我的html。

我想制作一个定时器来调用每个函数,延迟时间为5秒(测试时为5秒)。

我写了这段代码,但它没有用。关于如何使其发挥作用的任何提示?

我在页面加载时使用了函数init()

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

7 个答案:

答案 0 :(得分:0)

第一个问题是您的for循环错误,将其更改为此应该让您开始:

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

此外,每个switch语句中的delay变量都是多余的。首先尝试更改for循环,这应该在写入方向上启动。

答案 1 :(得分:0)

你有两个可能导致问题的基本语法问题

1)for循环的语法没有,分隔,应该有;

2)应该有i<=3。你有i=3,这将永远是真的。

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

答案 2 :(得分: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;
    }
}

答案 3 :(得分:0)

尝试使用setInterval功能。

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

答案 4 :(得分: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);
}

答案 5 :(得分:0)

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

答案 6 :(得分:-1)

您可以实现自己的睡眠方法并使用它:

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

Stackoverflow: sleep method for java script

当然这很直接/天真。