Как правильно использовать 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: <div id = "here"></div> </body> </html> </code>