Как правильно использовать setInterval и clearInterval для переключения между двумя разными функциями?

Для практики я пытаюсь отобразить число, которое увеличивается от 0 до 9, затем уменьшается от 9 до 0 и бесконечно повторяется.

Код, который у меня есть, кажется близким, но после второй итерацииsetInterval вызовы моих 2 соответствующих функцийcountUp а такжеcountDown, кажется, конфликтуют друг с другом, так как отображаемые числа не считаются в заданном порядке ... а затем происходит сбой браузера.

Вот мой код:

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

Ответы на вопрос(6)

Ваш ответ на вопрос