Как сделать настоящий таймер JavaScript

Question

Я ищу способ манипулировать анимацией без использования библиотек
и, как обычно, я делаю setTimeout в другом setTimout, чтобы сгладить пользовательский интерфейс
но я хочу сделать более точную функцию для этого, поэтому, если я хочу сделать 50 мс на штуку анимация, и я печатаю:

............
           sum=0,
           copy=(new Date()).getMilliseconds()

       function change(){


        var curTime=(new Date()).getMilliseconds(),
            diff=(1000+(curTime-copy))%1000  //caculate the time between each setTimeout

        console.log("diff time spam: ",diff) 

        sum+=diff
        copy=curTime

        var cur=parseInt(p.style.width)

        if (sum<47){//ignore small error
        //if time sum is less than 47,since we want a 50ms-per animation  

                    // we wait to count the sum to more than the number
            console.log("still wating: ",sum)
        }
        else{   
                    //here the sum is bigger what we want,so make the UI change
            console.log("------------runing: ",sum)
                sum=0 //reset the sum to caculate the next diff
                if(cur < 100)
                {

                    p.style.width=++cur+"px"

                }
                else{

                    clearInterval(temp)

                }
            }

       }

       var temp=setInterval(change,10)

Я не знаю, основная идея моего кода верна, у кого-нибудь есть идеи о том, как сделать более точный таймер в большинстве браузеров? Спасибо: -)
Установите URL JsFiddle:
http://jsfiddle.net/lanston/Vzdau/1/

Answer 1

Выглядит слишком сложно для меня, используйте setInterval и одну дату начала, например:

var start = +new Date();
var frame = -1;
var timer = setInterval(checkIfNewFrame, 20);

function checkIfNewFrame () {
  var diff = +new Date() - start;
  var f = Math.floor(diff / 50);
  if (f > frame) {
    // use one of these, depending on whether skip or animate lost frames
    ++frame; // in case you do not skip
    frame = f; // in case you do skip
    moveAnimation();
  }
}

function moveAnimation () {
  ... do whatever you want, there is new frame, clear timer past last one
}