setTimeout command breaking simple number ticker...

**Shammus** · 04-26-2013, 06:00 PM

Hi all,

I have a couple of simple number scrolling functions that currently work just fine. If you copy the code below into your editor, you'll see that when the page loads, the top number scrolls up to 49 and the bottom scrolls up to 98.

My question, is that I want to wrap these two functions in a larger function and apply setTimeout events to each of the functions to give each a second or two delay upon when the page loads, before the numbers start scrolling. Attempting to either wrap the two functions into a setTimeout or even wrap these two functions into a larger function just ends up breaking the scrolling number animations. There's likely a syntax issue I'm messing up here but how would you all accomplish this? Thanks in advance!

Code:

<!DOCTYPE html>
<html lang="en">
<head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale = 1.0, user-scalable = no" />
        <meta name="apple-mobile-web-app-capable" content="YES" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="format-detection" content="telephone=no" />
      
        <style>
               body {}
               .placeit {font-size:26px;}

        </style>



</head>
<body onload="scrollUp();scrollUpTwice();">


        <div class="placeit"><span id="numbers">0</span><sup>%</sup></div>
        <div class="placeit"><span id="numbersTwo">0</span><sup>%</sup></div>


	<script type="text/javascript" charset="utf-8">

               var nums = document.getElementById('numbers');
               var numsTwo = document.getElementById('numbersTwo');
               var value = parseFloat(nums.innerHTML);
               var valueTwo = parseFloat(numsTwo.innerHTML);
               var timeoutTimer = 10;
	       var timeoutTimerTwo = 30;

       
		function scrollUp() {
                       // the top value in the y-axis
                       if(value < 49) {
                               value += 1;
                               document.getElementById('numbers').innerHTML = value.toFixed(1);
                          if(value < 49) {
                                      // timeoutTimer will get reduced to zero
                                      // if needed put in a check and a min value
                                      
                                  countdown = setTimeout('scrollUp()', timeoutTimer);
                          }
                       }
               }
     
              
               function scrollUpTwice() {
                       // the top value in the y-axis
                       if(valueTwo < 98) {
                               valueTwo += 1;
                               document.getElementById('numbersTwo').innerHTML = valueTwo.toFixed(1);
                               if(valueTwo < 98) {
                                      // timeoutTimer will get reduced to zero
                                      // if needed put in a check and a min value                          

         

                                      countdown = setTimeout('scrollUpTwice()', timeoutTimerTwo);
                               }
                       }
               }


	</script>

</body>
</html>

**jscheuer1** · 04-27-2013, 03:22 AM

Code:

<!DOCTYPE html>
<html lang="en">
<head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale = 1.0, user-scalable = no" />
        <meta name="apple-mobile-web-app-capable" content="YES" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="format-detection" content="telephone=no" />
      
        <style>
               body {}
               .placeit {font-size:26px;}

        </style>



</head>
<body>


        <div class="placeit"><span id="numbers">0</span><sup>%</sup></div>
        <div class="placeit"><span id="numbersTwo">0</span><sup>%</sup></div>


	<script type="text/javascript" charset="utf-8">
window.onload = function(){setTimeout(function(){
               var nums = document.getElementById('numbers');
               var numsTwo = document.getElementById('numbersTwo');
               var value = parseFloat(nums.innerHTML);
               var valueTwo = parseFloat(numsTwo.innerHTML);
               var timeoutTimer = 25;
	       var timeoutTimerTwo = 30;

       
		function scrollUp() {
                       // the top value in the y-axis
                       if(value < 49) {
                               value += 1;
                               document.getElementById('numbers').innerHTML = value.toFixed(1);
                          if(value < 49) {
                                      // timeoutTimer will get reduced to zero
                                      // if needed put in a check and a min value
                                      
                                  countdown = setTimeout(scrollUp, timeoutTimer);
                          }
                       }
               }
     
              
               function scrollUpTwice() {
                       // the top value in the y-axis
                       if(valueTwo < 98) {
                               valueTwo += 1;
                               document.getElementById('numbersTwo').innerHTML = valueTwo.toFixed(1);
                               if(valueTwo < 98) {
                                      // timeoutTimer will get reduced to zero
                                      // if needed put in a check and a min value                          

         

                                      countdown = setTimeout(scrollUpTwice, timeoutTimerTwo);
                               }
                       }
               }
setTimeout(scrollUp, 1500);scrollUpTwice();
}, 1000);}
	</script>

</body>
</html>

**Shammus** · 04-27-2013, 04:33 AM

Thanks John, that worked exactly as needed. I was trying to wrap each of the smaller functions - scrollUp and scrollUpTwice in their own setTimeout functions which resulted in the numbers scrolling up to "1%" but going no higher.

As always, your help is greatly appreciated!!