¿Cómo uso correctamente setInterval y clearInterval para cambiar entre dos funciones diferentes?

Question

May 07, 2012, 06:09 PM

setinterval clearinterval javascript counter animation

¿Cómo uso correctamente setInterval y clearInterval para cambiar entre dos funciones diferentes?

Para la práctica, estoy tratando de mostrar un número que aumenta de 0 a 9, luego decrementa de 9 a 0, y se repite infinitamente.

El código que tengo hasta ahora parece estar cerca, pero en la segunda iteración lasetInterval Llamadas de mis 2 funciones respectivas.countUp ycountDown Parece que están en conflicto entre sí, ya que los números que se muestran no cuentan en el orden previsto ... y luego el navegador falla.

Aquí está mi 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>