0

I'm writing an animation looks like number is rising in limited time. use setInternal and clearInterval to implement it.(I don't want to use Jquery) the interval time is 1 milliSecond. And limit time is 1000 milli seconds. But it is slower than expected. It went almost 10000 milliseconds.What am I doing wrong?

Here's my code.

<html>
<head>
    <title>A numeric test</title>
</head>


<body>
    <div id="numberScroll"></div>

    <script type="text/javascript">
    var limitTime = 100; //milliSeconds
    var goalNum = 123456;   //the final num
    var increament = false; //whether the animation is increasing of not.
    var textSize = 30;      //size of text
    var temNum = increament ? (goalNum * 0.8) : (goalNum * 1.2);    //start number
    temNum = eval(temNum.toFixed(2));
    var increamentNum = (goalNum - temNum) / limitTime;
    var numberScroll = document.getElementById("numberScroll");
    if(numberScroll === null) {
        console.log("No Element Found");
    }
        numberScroll.style.fontSize = textSize;
        numberScroll.innerHTML = temNum;

    var intervalId = setInterval(function(){
        numberScroll.innerHTML = temNum.toFixed(2);
        temNum += increamentNum;
        if(increament){
            if(temNum >= goalNum) {
                clearInterval(intervalId);
                numberScroll.innerHTML = goalNum;
            }
        } else {
            if(temNum <= goalNum) {
                clearInterval(intervalId);
                numberScroll.innerHTML = goalNum;
            }
        }},1);
    </script>
</body>

</html>
AntiMoron
  • 1,286
  • 1
  • 11
  • 29
  • Try increasing the time from 1ms to 10ms and see if that helps. You need to give the function time to execute fully before calling it again. –  Dec 02 '14 at 04:03
  • Good animations use the actual clock time to continually readjust themselves. You can't rely on exact timing from `setInterval()` or `setTimeout()` so you use the actual system time to calculate how far through the animation you should be an draw that state, then go the next few ticks and do the same thing again until the exact amount of elapsed time has passed and you finish. Also, `setInterval()` will never go really, really short intervals - that is by design in the browser. – jfriend00 Dec 02 '14 at 04:26
  • @jfriend00 then what's the correct method of getting time of system? – AntiMoron Dec 02 '14 at 04:51
  • [`Date.now()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now) will get the current system time in ms from a reference time. – jfriend00 Dec 02 '14 at 04:59
  • @jfriend00 thanks a lot. I just find that new Date().getTime() also works – AntiMoron Dec 02 '14 at 05:04
  • For an example, see the 2nd code block in [this answer](http://stackoverflow.com/questions/16994662/count-animation-from-number-a-to-b/16994725#16994725) and [this answer](http://stackoverflow.com/questions/11042510/javascript-duration-of-animation-isnt-exact/11042911#11042911) contains several links about tweening (self-adjusting animation). – jfriend00 Dec 02 '14 at 05:11

0 Answers0