Como uso corretamente setInterval e clearInterval para alternar entre duas funções diferentes?

Question

May 07, 2012, 06:09 PM

javascript setinterval clearinterval animation counter

Como uso corretamente setInterval e clearInterval para alternar entre duas funções diferentes?

Para praticar, estou tentando exibir um número que aumenta de 0 a 9, depois decrementa de 9 a 0 e repete infinitamente.

O código que eu tenho até agora parece estar próximo, mas na segunda iteração osetInterval chamadas das minhas 2 funções respectivascountUp ecountDown parecem estar em conflito uns com os outros, como os números exibidos não estão contando na ordem desejada ... e então o navegador trava.

Aqui está o meu código:

<code><!DOCTYPE html>
<html>
    <head>
        <title>Algorithm Test</title>
    </head>

    <body onload = "onloadFunctions();">
        <script type = "text/javascript">
            function onloadFunctions()
            {
                countUp();
                setInterval(countUp, 200);
            }

            var count = 0;
            function countUp()
            {
                document.getElementById("here").innerHTML = count;
                count++;

                if(count == 10)
                {
                    clearInterval(this);
                    countDown();
                    setInterval(countDown, 200);
                }
            }
            function countDown()
            {
                document.getElementById("here").innerHTML = count;
                count--;

                if(count == 0)
                {
                    clearInterval(this);
                    countUp();
                    setInterval(countUp, 200);
                }       
            }
        </script>

        From 0 - 9, up and down:&nbsp;&nbsp;<div id = "here"></div>
    </body>
</html>
</code>